CSS弹性布局flex属性整理
warning:
这篇文章距离上次修改已过443天，其中的内容可能已经有所变动。
CSS的弹性布局（Flexbox）是一种现代化的布局模型，可以更简单、更灵活地控制容器内部项目的布局。flex属性是一个简写属性，它用于设置flex-grow、flex-shrink和flex-basis三个属性的简写。
flex属性的常见用法如下：
flex: none等同于flex: 0 0 auto，意味着项目不会增长也不会缩小，大小由width或height属性决定。flex: auto等同于flex: 1 1 auto，意味着项目会增长以填充任何空间，并且当容器缩小时会缩小。flex: initial等同于flex: 0 1 auto，意味着项目不会增长，但会缩小以适应容器大小。flex: 1等同于flex: 1 1 0%，意味着项目会平均分配容器中的空间。
实例代码：
.container {
display: flex;
}
.item-1 {
flex: none;
}
.item-2 {
flex: 1;
}
.item-3 {
flex: 2;
}
.item-4 {
flex: auto;
}在这个例子中，.item-1不会改变大小，.item-2、.item-3和.item-4会根据.container的剩余空间动态增长或缩小。.item-2和.item-3会平均分配剩余空间，而.item-4会占据更多的空间。
评论已关闭