伸缩布局
display: flex;
主轴的方向
在伸缩布局中, 默认情况下水平方向是主轴, 默认情况下主轴的起点在伸缩容器的最左边, 默认情况下所有的伸缩项都是从主轴的起点开始排版的
但是我们也可以通过属性来修改主轴的起点的位置
flex-direction: 用于修改主轴起点的位置
row: 起点在伸缩容器的最左边, 终点在伸缩容器的最右边. 从左至右的排版, 默认的取值
row-reverse: 起点在伸缩容器的最右边, 终点在伸缩容器的最左边, 从右至左的排版
column: 起点在伸缩容器的最顶部, 终点在伸缩容器的最底部, 从上至下的排版
注意点: 在伸缩布局中主轴和侧轴永远都是十字交叉的, 只要主轴的方向发生了变化, 侧轴也会发生变化
column-reverse: 起点在伸缩容器的最底部, 终点在伸缩容器的最顶部, 从下至上的排版
主轴对齐方式
flex-direction: row; 主轴起点的默认值
justify-content: flex-start; 主轴上伸缩项对齐的默认值
注意点: 在设置对齐方式的时候一定要理解两步操作
1.按照主轴起点对伸缩项进行排版
2.按照指定的对齐方式对齐排版好的伸缩项
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-between;*/
justify-content: space-around;
侧轴对齐方式
告诉浏览器排版好的伸缩项需要和侧轴的起点对齐
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: center;*/
注意点:
侧轴对比主轴来说没有两端对齐(space-between)和环绕对齐(space-around)
baseline: 让所有伸缩项中的基线在一条直线上对齐
align-items: baseline;
stretch(拉伸对齐/等高对齐):
让所有的伸缩项的高度变为侧轴的高度
注意点:
如果需要设置为拉伸对齐, 那么伸缩项不能设置高度
如果伸缩项设置了高度, 那么拉伸对齐就会失效
如果在伸缩容器中通过 align-items: 来控制伸缩项的对齐方式, 是一次性控制所有伸缩项的对齐方式
如果想单独的控制某一个伸缩项在侧轴上的对齐方式, 那么需要将控制对齐方式的属性写到伸缩项中
align-items: 写到伸缩容器中 / 控制所有伸缩项
align-self: 写到伸缩项中 / 控制编写对应代码的那个伸缩项
align-self: 的取值和align-items:的取值是一样的, 只是控制的范围和书写的位置不同而已
1.默认情况下如果伸缩容器的一行放不下所有的伸缩项, 那么系统会自动等比压缩所有的伸缩项
2.在伸缩容器中有一个叫做flex-wrap属性, 专门用于控制放不下是否需要换行的
默认的取值: flex-wrap 不换行
wrap: 放不下就换行 而不是等比压缩
wrap-reverse: 放不下就换行 , 以行为单位进行反转
*/
/*flex-wrap: nowrap;*/
/*flex-wrap: wrap;*/
/*flex-wrap: wrap-reverse;*/
flex-wrap: wrap;
/*
在伸缩容器中有一个叫做align-content的属性, 是专门用于设置换行之后的对齐方式的
注意点: 只有伸缩项发生了换行这个属性才有效
flex-start: 换行之后和侧轴的起点对齐, 一行接一行
flex-end: 换行之后和侧轴的终点对齐, 将所有换行之后的内容当做一个整体来操作
center: 换行之后和侧轴的中点对齐
space-between: 换行之后在侧轴上两端对齐
space-around: 换行之后在侧轴上环绕对齐
stretch: 以行为单位进行拉伸, 拉伸的部分以空白填充, 保证拉伸之后所有的行加起来能够填满侧轴
*/
/*align-content: flex-start;*/
/*align-content: flex-end;*/
/*align-content: center;*/
/*align-content: space-between;*/
/*align-content: space-around;*/
排序
默认情况下每一个伸缩项都有一个order属性, 用于决定排序的先后顺序
默认情况下所有伸缩项的order属性的取值都是0
我们可以通过修改order属性的取值来实现伸缩项的排序
在伸缩项中有一个flex-grow属性, 用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器
默认情况下flex-grow的取值是0, 表示我们设置的宽度是多少就按照多少来显示, 不进行任何的扩充
注意点:
只有当所有伸缩项的宽度总和小于伸缩容器宽度的时候flex-grow这个属性才有效
在伸缩项中有一个flex-shrink属性, 用于控制当所有伸缩项的宽度总和大于伸缩容器宽度的时候如何缩小自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器
默认情况下flex-shrink的取值是1, 表示当所有伸缩项宽度的总和大于伸缩容器宽度的时候等比缩小自己
注意点:
只有当所有伸缩项的宽度总和大于伸缩容器宽度的时候flex-shrink这个属性才有效
1.如果没有指定flex-grow属性, 或者flex-grow:的值是0, 那么当前的伸缩项不会被扩充
2.如果flex-shrink的值是0, 那么当前的伸缩项不会被缩小
3. 注意点
前面所写的注释都是说宽度扩充或者宽度缩小, 但是这种说法是不严谨的
也有可能扩充和缩小的是高度, 到底是宽度还是高度是由主轴决定的, 扩充和缩小的是主轴方向上的值
也就是说如果主轴是水平方向的, 那么扩充和缩小的就是宽度
也就是说如果主轴是垂直方向的, 那么扩充和缩小的就是高度
1.在伸缩布局中可以通过flex-basis属性设置伸缩项的宽度
注意点: flex-basis 只有在伸缩布局中才有效
2.在伸缩布局中如果通过flex-basis设置了宽度, 那么再通过width设置宽度就会无效
也就是说flex-basis的优先级要高于width的优先级
3.在伸缩布局中如果同时通过flex-basis和width设置了宽度, 而且一个设置的是auto,一个设置的是具体的值, 那么会按照具体的值来显示
flex: 扩充 缩小 宽度;
flex默认值
flex: 0 1 auto;
order排序的规则: 从小到大的排序, 越小的显示在越前面, 越大的显示在越后面