Flex--弹性布局学习--flex瀑布流的实现

梦里梦外; 2022-02-23 00:28 3804阅读 0赞

**众所周知：**传统的布局方式是通过**position**\+**display**\+**flort**实现的，在页面的构造过程中会出现很多的问题，包括高度塌陷和元素垂直居中等等的问题，一直到2009年，W3C提出了一种新的方案【**[Flex布局][Flex]**】，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

现在的手机端，包括手机页面，微信小程序等大多采用flex进行布局，flex也将成为未来布局的首选内容，下面我将会对我在flex的学习过程中遇到的一些问题和相关知识进行部分总结，并通过flex的布局实现瀑布流布局的方式进行简单的分析。

### 一、什么是flex，什么是flex布局 ###

简单的来说，flex是一种全新的布局方式，有的人称它为**Flexible Box**，意思就是说“弹性布局”，旨在实现一种更加有效地布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态的。所以当时才命名为"**flex**"。Flex布局背后的主要思想是给容器控制项目（Flex项目）的宽度、高度的能力，使用Flex项目可以自动填满容器的可用空间（主要是适应所有类型的显示设备和屏幕大小）。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。

想要使用flex布局，首先就是要将父元素设置   **display：flex   **，当出现这句代码的时候，就是说明将此块元素设为了flex容器，而且将它的子元素设为了flex项目。

**注意：**flex的布局不是一个元素属性，而是一系列属性实现的flex布局。

### 二、基本概念 ###

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70][]

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

### 三、相关属性 ###

**1、 flex-direction属性：**主轴的排列方向

flex-direction: row;(默认) ----主轴为水平方向，起点在左端。
    flex-direction: row-reverse; ----主轴为水平方向，起点在右端。
    flex-direction: column; ----主轴为垂直方向，起点在上沿。
    flex-direction: column-reverse; ----主轴为垂直方向，起点在下沿。

**2、flex-wrap属性：**定义元素的换行

flex-wrap: nowrap;(默认) ----表示不换行，平分父元素
    flex-wrap: wrap; ----表示换行布局
    flex-wrap: wrap-reverse; ----换行布局，但首行在下方

**3、flex-flow属性：**属于以上两个属性的缩写

flex-flow：row nowrap；(默认)

**4、justify-content属性：**主轴方向上的对齐方式

justify-content: flex-start;(默认) ----靠左对齐
    justify-content: flex-end; ----靠右对齐
    justify-content: center; ----居中排列
    justify-content: space-between; ----两端对齐，项目之间的间隔都相等
    justify-content: space-around; ----每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

**5、align-items属性：**交叉轴方向上的对齐方式

align-items: flex-start;(默认)----交叉轴的起点对齐
    align-items: flex-end;----交叉轴的终点对齐
    align-items: center;----交叉轴的中点对齐
    align-items: baseline;----项目的第一行文字的基线对齐
    align-items: stretch;----如果项目未设置高度或设为auto，将占满整个容器的高度

**6、align-content属性：**多根轴线的对齐方式

align-content: stretch;(默认) ----轴线占满整个交叉轴
     align-content: flex-start; ----与交叉轴的起点对齐
     align-content: flex-end; ----与交叉轴的终点对齐
     align-content: center; ----与交叉轴的中点对齐
     align-content: space-between; ----与交叉轴两端对齐，轴线之间的间隔平均分布
     align-content: space-around; ----每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

### 四、项目属性 ###

**1、order属性：**order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

**2、flex-grow属性：**flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

**3、flex-shrink属性：**flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

**4、flex-basis属性：**flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

**5、flex属性：**flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

**6、align-self属性：**align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

### 五、瀑布流概述 ###

刚开始的时候，我们做瀑布流，是通过**Multi-columns**列的概念来实现的，或是通过JavaScript来实现，现在有了flex，那么就可以通过flex进行实现瀑布流的布局，实现的方式其实相当的简单，在一个大的flex容器中放几个块，通过水平排列不换行的方式实现，接着分别在块中添加元素，元素的排列属于垂直排列。

就个人而言不推荐使用这种方式进行布局，因为到后来进行前后端交互的时候，将数据分开放在不同的板块进行遍历是相当困难的，还是需要通过JavaScript的帮助，不过在静态页面中还是不错的布局方式。

### 六、瀑布流代码实现 ###

**1、HTML**

**2、CSS**

.masonry {
        display: flex;
        flex-direction: row;
    }
    .column {
        display: flex;
        flex-direction: column;
        width: calc(100%/3);----三列的情况下
    }

我的分享就这些内容了，一方面对学过的知识进行复习巩固，另一方面希望可以给需要的人一些小小的帮助，很多内容太过简短，不够详细，大佬勿喷。

[Flex]: http://www.runoob.com/w3cnote/flex-grammar.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70]: /images/20220223/b27beff2f48e4c30b56602097a0d55e9.png