弹性布局说明及flex容器属性

一、弹性布局
说明：
a) 给元素设置了display:flex;后，就成为了弹性盒或者弹性布局
b) 当父元素设置了flex后，子元素的float，clear和vertical-align将会失效
c) 我们把设置display:flex;属性的元素称之为Flex容器，把里面的子元素称之为Flex项目
d) 当给元素设置了display:flex;后，会产生两根轴线：主轴和交叉轴
♥二、flex容器属性
1.设置主轴的方向
语法：flex-direction:row|row-reverse|column|column-reverse;
row 默认值，主轴在水平方向，起点在左端
row-reverse 主轴在水平方向，起点在右端
column 主轴在垂直方向，起点在上沿
column-reverse 主轴在垂直方向，起点在下沿

2.设置flex项目一行或多行显示
语法：flex-wrap:nowrap|wrap|wrap-reverse;
nowrap 默认值，不换行
wrap 换行
wrap-reverse 换行，但行的顺序是倒过来的

3.flex-direction和flex-wrap简写方式
语法：flex-flow:row nowrap; (默认值)

4.设置主轴对齐方式
语法：justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start 主轴在水平方向时，类似于左浮动
flex-end 主轴在水平方向时，类似于右浮动
center 居中对齐
space-between flex项目两端对齐，中间间隔相等
space-around flex项目两侧间隔相等

5.设置交叉轴对齐方式
语法：align-items:flex-start|flex-end|center|baseline|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考居中对齐
baseline flex项目第一行文字基线对齐
stretch flex项目没有设置高度或者为auto，将占满整个父元素的高度

6.设置多根轴线对齐方式
语法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考，居中对齐
space-between 交叉轴两端对齐，轴线之间的间隔平均分布
space-around Flex项目（沿交叉轴方向）之间的间隔相等
stretch flex没有设置高度或者为auto，将均分父元素的高度

♥三、 Flex项目属性

1.设置flex项目排列顺序
语法：order:整数值;
注：值越小越靠前

2.设置某个flex项目不同于其他flex项目的交叉轴对齐方式
语法：align-self:flex-start|flex-end|center|baseline|stretch;

3.设置flex项目放大比例
语法：flex-grow:0|1|数值;
注：当父元素存在剩余空间，flex项目也不放大，即flex-grow默认值为0

4.设置flex项目缩小比例
语法：flex-shrink:1|0|数值;
注：flex-shrink默认值为1，即当父元素空间不足时，flex项目等比例缩小
flex-shrink:0;表示即使父元素空间不足，flex项目也不缩小

5.在分配剩余空间之前，设置flex项目占据主轴的空间
语法：flex-basis:auto|百分比|数值+单位;

6.flex-grow,flex-shrink和flex-basis的简写方式
语法：flex:0 1 auto; (默认值)
注：flex:1; 完整写法为： flex:1 1 0%;
应用1：flex项目等比例分配空间
应用2：分配剩余空间给某个flex项目

---

作者：路人甲小码
来源：CSDN
原文：https://blog.csdn.net/weixin_44111864/article/details/89048636
版权声明：本文为博主原创文章，转载请附上博文链接！