CSS3 弹性布局flex属性

Administrator 字数: 3181 阅读耗时: 7 分钟 2022/05/07 博客独享热度: 175 评论: 0

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;
代码演示：

202103121615515097131661
也可以用flex: 1;表示：每个子容器同时设置为flex-grow: 1 表示 3个子容器 “均分”弹性容器的剩余空间