CSS3 弹性布局flex属性
flex: flex-grow flex-shrink flex-basis
flex-grow | 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。 |
---|---|
flex-shrink | 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。 |
flex-basis | 项目的长度。合法值:“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。 |
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
css:
.container {
display: flex;
display: -webkit-flex;
outline: 1px dashed red;
width: 900px;
margin: 200px auto;
}
.item {
width: 220px;
height: 220px;
background-color: #b6b6b6;
}
.item1 {
background-color: pink;
}
.item2 {
background-color: lightblue;
}
.item3 {
background-color: lightgreen;
}
为item设置flex: 1 1 auto;表示:
每个子容器 同时设置为flex-grow: 1 表示 3个子容器 “均分”弹性容器的剩余空间
每个子容器 同时设置为flex-shrink:1
每个子容器 同时设置为flex-basis: auto;
代码演示:
也可以用flex: 1;表示:每个子容器 同时设置为flex-grow: 1 表示 3个子容器 “均分”弹性容器的剩余空间
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果