flex布局

本文思维导图：

image.png

给div这类块状元素元素设置display:flex或者给span这类内联元素设置display:inline-flex，flex布局即创建！其中，直接设置display:flex或者display:inline-flex的元素称为flex容器，里面的子元素称为flex子项。

一、作用在flex容器上的CSS属性

1. flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。和CSS的direction属性相比就是多了个flex。
例子：

• flex-direction:row;
  • http://js.jirengu.com/hewixakuwo/2/edit
  • direction:rtl;
    • http://js.jirengu.com/hewixakuwo/6/edit
• flex-direction:row-reverse;
  • http://js.jirengu.com/hewixakuwo/4/edit?html,css,output
• flex-direction:column;
  • http://js.jirengu.com/hewixakuwo/4/edit?html,css,output
• flex-direction:column-reverse;
  • http://js.jirengu.com/hewixakuwo/6/edit

2. flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示，如果换行，则下面一行是否反方向显示。这个属性比较好记忆，在CSS世界中，只要看到单词wrap一定是与换行显示相关的，word-wrap属性或者white-space:nowrap或者pre-wrap之类。

• flex子项最小内容宽度min-content之和大于flex容器宽度，则内容溢出，表现和white-space:nowrap类似。
• 如果flex子项最小内容宽度min-content之和小于flex容器宽度，则：
  • flex子项默认的fit-content宽度之和大于flex容器宽度，则flex子项宽度收缩，正好填满flex容器，内容不溢出。
  • flex子项默认的fit-content宽度之和小于flex容器宽度，则flex子项以fit-content宽度正常显示，内容不溢出。

在下面案例中，示意的图片默认有设置max-width:100%，flex子项div没有设置宽度，因此，flex子项最小宽度是无限小，表现为图片宽度收缩显示。如果我们取消max-width:100%样式，则此时flex子项最小宽度就是图片宽度，就可以看到图片溢出到了flex容器之外。

• flex-wrap:wrap;
  • http://js.jirengu.com/hewixakuwo/15/edit?html,css
• flex-wrap:wrap-reverse;
  • http://js.jirengu.com/hewixakuwo/15/edit?html,css

3. flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性，语法如下：

当多属性同时使用的时候，使用空格分隔。

可以看到水平排序从右往左（row-reverse属性值的作用），以及换行的那一行在上面（wrap-reverse属性值的作用）。
例子：

• flex-flow:row wrap;
  • http://js.jirengu.com/tujowehefa/10/edit
• flex-flow:row-reverse wrap-reverse;
  • http://js.jirengu.com/tujowehefa/11/edit

4. justify-content

justify-content属性决定了水平方向子项的对齐和分布方式。CSS text-align有个属性值为justify，可实现两端对齐，所以，当我们想要控制flex元素的水平对齐方式的时候，记住justify这个单词，justify-content属性也就记住了。

justify-content可以看成是text-align的远房亲戚，不过前者控制flex元素的水平对齐外加分布，后者控制内联元素的水平对齐。

• justify-content:flex-start;
  • http://js.jirengu.com/qezuzozufe/1/edit?html,css,output
• justify-content:flex-end;
  • http://js.jirengu.com/xanotujewu/1/edit
• justify-content:center;
  • http://js.jirengu.com/xanotujewu/1/edit?html,css,output
• justify-content:space-between;
  • http://js.jirengu.com/xanotujewu/1/edit?html,css
• justify-content:space-around;
  • http://js.jirengu.com/xanotujewu/1/edit?html,css
• justify-content:space-evenly;
  • http://js.jirengu.com/xanotujewu/1/edit?html,css

5. align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在垂直方向上的对齐方式，大家是一起顶部对齐呢，底部对齐呢，还是拉伸对齐呢。

• align-items:flex-start;
  • http://js.jirengu.com/nedaqijihi/6/edit
• align-items:flex-end;
  • http://js.jirengu.com/nedaqijihi/4/edit?html,css,output
• align-items:baseline;
  • http://js.jirengu.com/nedaqijihi/14/edit?html,css,output
• align-items:center;
  • http://js.jirengu.com/nedaqijihi/14/edit?html,css,output

三、作用在flex子项上的CSS属性

1. order

我们可以通过设置order改变某一个flex子项的排序位置。

语法：

所有flex子项的默认order属性值是0，因此，如果我们想要某一个flex子项在最前面显示，可以设置比0小的整数，如-1就可以了。

参考：https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/