者：EcbJS

转发链接：https://blog.csdn.net/EcbJS/article/details/106466757

言

在css3 Flex技术出现之前制作网页大多使用浮动（float）、定位（position）以及 显示（display）来布局页面，随着互联网快速发展，移动互联网的到来，已无法满足需求，它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

什么是 Flex？

Flex 是 Flexible Box 的缩写，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。

目前，几乎所有的浏览器都支持 Flex 布局，所以flex 是必须要掌握的知识，比float、position更重要。

基本概念

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

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

你可以通过display: flex (块级)或 display:inline-flex(行内块级)使一个元素变成flex容器，一旦其元素被设置flex容器，其子元素的 float、clear 和 vertical-align 等属性将失效。

flex 有以下这些属性：

按照功能范围可分为容器属性和项目属性。

容器的属性

1、flex-direction

此属性决定容器主轴排列方式，它有以下几个值：

如下图演示：

2、flex-wrap

flex-wrap 当子元素项超出容器时，设置其是否换行，有以下值：

默认如果不设置flex-wrap，当子元素在主轴方向总和超过容器大小，则其大小会变小，直到容器没有多余的空间，如下演示：

如图3即使子元素设置了宽度或高度，它仍然被挤压，直到容器没有多余空间，此时就会超出容器显示。当主轴方向是垂直方向时一样。

下面是flex-wrap换行的效果：

当主轴是水平方向时

当主轴是垂直方向时

3、flex-flow

flex-flow 是flex-direction 和 flex-wrap 两个属性的简写，也就是说它可以同时设置这2个属性，语法如下：

flex-flow: flex-direction flex-wrap;

如下图示例：

flex-flow: row nowrap

flex-flow: row wrap

flex-flow: column wrap

其它属性依次类推，你可以试试相互组合。

4、justify-content

此属性用来设置子元素项目在主轴上的对齐方式，它有以下几个值：

如下图演示的效果：

水平排列时

垂直排列时

5、align-items

此属性和justify-content类似，区别是align-items 是这种子项目元素在交叉轴上的对齐方式，它有以下值：

效果如下：

这里注意，当值为baseline时，是基于文字的基线对齐的。

6、align-content

align-content 属性比较抽象，它只有满足以下条件下才能起作用：

1. 对父元素设置属性display:flex;
2. 并且设置排列方式为水平排列 flex-direction:row;
3. 设置换行，flex-wrap:wrap;

align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体进行对齐。不同取值的效果如下所示：

如下示例：

项目属性

1、order

order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义,如下图示例：

子元素项目按照order的值从小到大排序。

2、align-self

align-self 属性允许您为某个项目设置不同于其它项目的对齐方式，align-self 属性和容器的align-items属性一样，它可以覆盖容器的align-items 属性的值。

如下示例：

如图15中c方块的对齐方式覆盖了容器的align-items: center;

3、flex-grow

flex-grow属性定义项目的放大比例，默认为0。

如上图中其它方块默认是flex-grow:0不放大。

如上图方块2占满了剩余的空间，虽然让设置了flex-grow:2；

如上图当所有项目flex-grow:1时，则它们将等分剩余空间（如果有的话），这里即使你设置了其它的数值比如flex-grow:2，flex-grow:10结果都一样等分。

如果其中一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4、flex-shrink

flex-shrink属性和flex-grow相反，它是设置项目缩小比例。默认为1，如果空间不足，该项目将缩小。

如下所图例，当子元素设置flex-shrink:1时，如果空间不足，该项目将等比缩小。

如下图，当子元素设置flex-shrink:1时，但是其中c子项的flex-shrink:0时，在空间不足时c子项保持不变，其它项等比缩小。

同理当c项flex-shrink:2时，在空间不足时c项将比其它项目多缩小2倍，数值不同缩小比例不一样，如下图：

5、flex-basis

flex-basis属性设置项目如何分配主轴上剩余的空间，值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式。

flex-basis:auto 时：

flex-basis:100% 时：

flex-basis:100px 时：

• 注意它和width的区别，flex-basis只能在flex容器中使用，但width在任何块级元素都可以。
• 同时设置width，又设置flex-basis，当flex-basis大于自身内容宽度时，不管width是否设置，flex-basis优先级高。
• 当flex-basis和width都小于自身内容宽度时，flex-basis和width哪个值大，宽度就是那个。
• 当flex-basis设置值小于自身内容宽度，而width大于自身宽度时，则宽度为自身内容宽度。

flex属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：

flex: flex-grow flex-shrink flex-basis;

如下示例：

最后

关于flex容器，其知识点比较多相对难易理解，它非常灵活，所以要活学活用，多加练习。通常flex会和rem一起使用，实现页面自适应，常见的网页布局比如以下：

关于网页布局，以后会专门介绍，在这里不详细说明了，感谢关注，学习愉快。

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

https://www.runoob.com/w3cnote/flex-grammar.html

http://c.biancheng.net/css3/flex.html

https://www.w3school.com.cn/cssref/pr_flex.asp

言

flex布局在布局中用的很多，可以使用在pc端，也可以在小程序中使用，甚至可以代替float浮动，学好flex布局对我们的用处很大。

flex布局的重要性

1. flex布局可以设置控件的排列方向和顺序。
2. flex布局可以设置各种各样的对齐方式。
3. flex布局可以弹性的放大和缩小

flex布局的应用

先设计容器。

<view class="containers">
<view class="div1"></view>
<view class="div2"></view>
<view class="div3"></view>
</view>

在父控件上加上display:flex,就变成了css的弹性布局。

.containers{
  /* 加上他，变成弹性布局，将会水平排列 */
  display: flex;
  /* 控件的排列方向，默认是row，水平排列 */
  /* flex-direction: column; */
  /* 对齐方式.
  flex-start:起点对齐，
  flex-end:末尾对齐
  space-between:两端对齐
  space-around:环绕对齐
   */
  justify-content: space-between;
  /* 相对于父控件的对齐方式
    flex-start:顶端对齐
    flex-end:末端对齐
    center:居中对齐
    baseline:文字基线对齐
  */
  align-items: flex-end;
  height: 200px;
  background: pink; 
}

子div的样式如：

.div1{
  width: 50px;
  height: 50px;
  background-color: yellow;
  /* 在子控件上加入flex=1，将会平分屏幕的宽度 */
  /* flex: 1; */
  /* 该子组件将会填充剩余的宽度 */
  /* flex-grow: 1; */
}
.div2{
  width: 50px;
  height: 50px;
  background: blue;
  /* flex: 1; */
}
.div3{
  width: 50px;
  height: 50px;
  background: greenyellow;
  /* flex: 1; */
}

当子样式中添加flex:1的时候，该资阳市将会把容器填充满，如果每个子控件都加上flex，将会平分父容器。不会受到自身div宽度的限制。
如下图为子组件都设为flex:1的情况。

如果子div没有填满屏幕的宽度，这时我们可以在子组件中设置 flex-grow: 1;来让该子组件填充满屏幕的宽度。如下图所示，为黄色的子div加上了flex-grow:1,当为多个子div设置该属性的时候，子div也会平分。

接下来设计父div，在父div上加**justify-content:**属性，会给子组件设置对齐方式。

• flex-start:起点对齐

也可以设置align-items属性来设置相对于父div的高度对齐方式。

• flex-start:顶端对齐

• baseline:文字基线对齐

文字基线对齐，是子div有文字的时候，文字在一条线上