弹性盒布局中的flex属性使用

news2025/4/27 12:57:51

先回顾一下弹性盒的使用，常用的属性有

flex-direction ：元素主轴(即横向还是纵向)，
可选值有：column 从上到下；column-reverse 从下到上；row 从左到右；row-reverse 从右到左；

flex-wrap ：元素换行
可选值有： wrap必要时换行(即根据元素宽度自动换行)；nowrap 不换行；wrap-reverse 反向换行；

flex-flow ： flex-direction 和 flex-wrap 属性的简写
可选值即为这两个属性的可选值，例flex-flow: row wrap;

justify-content ：水平对齐方式
可选值：center居中对齐；flex-start 开头对齐；space-around 分散对齐但两端留有间距；space-between 分散对齐两端无间距；

align-items ：垂直对齐方式
可选值：center 垂直居中；flex-start 顶部对齐；flex-end 底部对齐；stretch 拉伸填充对齐；

flex属性
flex是作用于弹性盒内部的子元素上的，其余作用上子元素上的属性还有：

order：子元素的顺序，子元素会按照order的值从小到大顺次排序，而不是按照书写顺序
在这里插入图片描述
flex-grow：（定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大）
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
在这里插入图片描述
flex-shrink：（定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）
如果子元素的flex-shrink属性为1时，空间缩小，元素将等比例缩小。
如果一个子元素的flex-shrink属性为0，其他子元素都为1，当空间不足时，前者不缩小。
负值对该属性无效。
在这里插入图片描述