本文共 1997 字，大约阅读时间需要 6 分钟。

1.1 原理基本实现

代码示例

  
       
   
  
    
java
  
    
python
  
    
html
   

执行结果

1.2 主轴的方向

基本定义

• 在伸缩布局中, 默认情况下水平方向是主轴, 默认情况下主轴的起点在伸缩容器的最左边。
• 默认情况下所有的伸缩项都是从主轴的起点开始排版的，但是也可以通过属性来修改主轴的起点的位置。

flex-direction属性：用于修改主轴起点的位置。

参数使用

row: 起点在伸缩容器的最左边, 终点在伸缩容器的最右边,从左至右的排版, 默认的取值。row-reverse: 起点在伸缩容器的最右边, 终点在伸缩容器的最左边, 从右至左的排版。column: 起点在伸缩容器的最顶部, 终点在伸缩容器的最底部, 从上至下的排版。注意点: 在伸缩布局中主轴和侧轴永远都是十字交叉的, 只要主轴的方向发生了变化, 侧轴也会发生变化column-reverse: 起点在伸缩容器的最底部, 终点在伸缩容器的最顶部, 从下至上的排版。

代码示例

执行结果

1.3 主轴的对齐方式

justify-content属性

justify-content: flex-start; 主轴上伸缩项对齐的默认值

注意点

按照主轴起点对伸缩项进行排版。按照指定的对齐方式对齐排版好的伸缩项。

代码示例

执行结果

1.4 侧轴的对齐方式

align-items属性

align-items: stretch;	让所有的伸缩项的高度变为侧轴的高度。

注意点

如果需要设置为拉伸对齐, 那么伸缩项不能设置高度。如果伸缩项设置了高度, 那么拉伸对齐就会失效。

代码示例

执行结果

1.5 布局换行和换行对齐

1.默认情况下如果伸缩容器的一行放不下所有的伸缩项, 那么系统会自动等比压缩所有的伸缩项。

2.在伸缩容器中有一个叫做flex-wrap属性, 专门用于控制放不下是否需要换行的。

flex-wrap属性

默认的取值: flex-wrap 不换行wrap: 放不下就换行 而不是等比压缩wrap-reverse: 放不下就换行 , 以行为单位进行反转

align-content的属性

专门用于设置换行之后的对齐方式，只有伸缩项发生了换行这个属性才有效。

参数列表

flex-start: 换行之后和侧轴的起点对齐, 一行接一行。flex-end: 换行之后和侧轴的终点对齐, 将所有换行之后的内容当做一个整体来操作。center: 换行之后和侧轴的中点对齐。space-between: 换行之后在侧轴上两端对齐。space-around: 换行之后在侧轴上环绕对齐。stretch: 以行为单位进行拉伸, 拉伸的部分以空白填充, 保证拉伸之后所有的行加起来能够填满侧轴。

代码示例

执行结果

1.6 伸缩项排序

order属性

用于决定排序的先后顺序,默认情况下所有伸缩项的order属性的取值都是0。

注意点

• 可以通过修改order属性的取值来实现伸缩项的排序。
• order排序的规则: 从小到大的排序, 越小的显示在越前面, 越大的显示在越后面。

代码示例

执行结果

​

1.7 伸缩项扩充

flex-grow属性

用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器。

注意点

• 默认情况下flex-grow的取值是0, 表示我们设置的宽度是多少就按照多少来显示, 不进行任何的扩充。
• 只有当所有伸缩项的宽度总和小于伸缩容器宽度的时候flex-grow这个属性才有效。

代码示例

执行结果

1.8 伸缩项缩小

flex-shrink属性

用于控制当所有伸缩项的宽度总和大于伸缩容器宽度的时候如何缩小自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器。

注意点

• 默认情况下flex-shrink的取值是1, 表示当所有伸缩项宽度的总和大于伸缩容器宽度的时候等比缩小自己。
• 只有当所有伸缩项的宽度总和大于伸缩容器宽度的时候flex-shrink这个属性才有效。

代码示例

执行结果

1.9 伸缩项宽度设置

flex-basis属性

在伸缩布局中可以通过flex-basis属性设置伸缩项的宽度。

注意点

flex-basis 只有在伸缩布局中才有效。在伸缩布局中如果通过flex-basis设置了宽度, 那么再通过width设置宽度就会无效，也就是说flex-basis的优先级要高于width的优先级。在伸缩布局中如果同时通过flex-basis和width设置了宽度, 而且一个设置的是auto,一个设置的是具体的值, 那么会按照具体的值来显示。

代码示例

执行结果

​

转载地址：http://vabz.baihongyu.com/