深入剖析CSS弹性盒模型flex

弹性盒模型的基本概念

弹性盒模型(flexbox)是CSS3中的一种布局模式，它主要用于解决传统水平和垂直布局模型的不足。在弹性盒模型中，主要有以下几个概念：

• 弹性容器（flex container）：包含有弹性盒子(flex item)的容器。
• 弹性盒子（flex item）：弹性容器中的子元素。
• 主轴（main axis）：弹性盒子的排列方向。
• 交叉轴（cross axis）：垂直于主轴的方向。

弹性容器的属性

在弹性容器中，我们可以使用一些属性设置弹性盒子的排列方式。下面介绍一些常用的弹性容器属性：

display

定义弹性容器，必须设置该属性，将其值设为flex或inline-flex，表示该元素是一个弹性容器。

.container {
  display: flex;
}

flex-direction

定义弹性容器中弹性盒子的排列方向，取值包括row（主轴方向为水平方向，左到右），row-reverse（主轴方向为水平方向，右到左），column（主轴方向为垂直方向，上到下），column-reverse（主轴方向为垂直方向，下到上）。

.container {
  flex-direction: row;
}

justify-content

定义弹性容器中弹性盒子沿着主轴的对齐方式，包括flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔都相等）、space-around（每个项目两侧的间隔相等）。

.container {
  justify-content: flex-start;
}

align-items

定义弹性容器中弹性盒子沿着交叉轴的对齐方式，包括stretch（默认值，拉伸盒子以适应容器高度）、flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（以第一行文字的基线对齐）。

.container {
  align-items: stretch;
}

弹性盒子的属性

在弹性盒子中，我们可以使用一些属性来设置单个弹性盒子的样式。

order

用来定义弹性盒子的排列顺序，值为整数。默认情况下，所有弹性盒子的order值为0，通过order值可以任意调整弹性盒子的位置。

.item {
  order: 2;
}

flex-grow

用来定义弹性盒子的伸展（增长）能力，值为非负整数。默认情况下，所有弹性盒子的flex-grow值为0，如果有多余的空间，弹性盒子也不会伸展。当所有弹性盒子的flex-grow值都为1时，它们将平均分配剩余空间。

.item {
  flex-grow: 1;
}

flex-shrink

用来定义弹性盒子的收缩能力，值为非负整数。默认情况下，所有弹性盒子的flex-shrink值为1，当空间不足时，弹性盒子会等比例缩小。如果有弹性盒子的flex-shrink值为0，空间小于它的min-width，此时width:auto，其他弹性盒子会缩小以适应剩余空间。

.item {
  flex-shrink: 0;
}

flex-basis

用来定义弹性盒子占据空间的基准值，可以设置一个宽度值。在默认情况下，所有弹性盒子的flex-basis值为auto，即由子元素本身的大小决定。

.item {
  flex-basis: 100px;
}

flex

flex属性是flex-grow、flex-shrink和flex-basis的缩写，用于设置弹性盒子在主轴上的伸展能力、在主轴上的收缩能力和占据空间的基准值。

.item {
  flex: 1 0 100px;
}

示例说明

示例一

在这个例子中，我们会用到上面提到的弹性容器属性 display 、flex-direction、justify-content 以及弹性盒子属性 flex。

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.item {
  flex: 1 1 auto;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.item1 {
  background-color: #6699ff;
  color: #fff;
}

.item2 {
  background-color: #66cccc;
  color: #fff;
}

.item3 {
  background-color: #cc99ff;
  color: #fff;
}

在这个例子中，我们使用 display: flex 将.container设置为弹性容器，使其内部的元素=item 都成为了弹性盒子。

使用 flex-direction: row 属性设置弹性盒子的排列方式为水平排列。

使用 justify-content: space-around 属性设置弹性盒子沿着主轴方向等间距排列并且占据剩余宽度。

示例二

在这个例子中，我们会用到上面提到的弹性容器属性 align-items以及弹性盒子属性 order 、flex-grow、flex-shrink和flex-basis。

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

.container {
  display: flex;
  align-items: center;
}

.item1 {
  order: 3;
  flex-grow: 1;
  background-color: #6699ff;
  color: #fff;
}

.item2 {
  order: 1;
  flex-shrink: 3;
  background-color: #66cccc;
  color: #fff;
}

.item3 {
  order: 2;
  flex-basis: 200px;
  background-color: #cc99ff;
  color: #fff;
}

在这个例子中，我们使用 align-items: center 属性设置弹性盒子沿着交叉轴居中对齐。

使用 order 属性通过数值的大小调整弹性盒子在主轴方向的排列顺序。

在弹性盒子实现自适应布局时，可以设置 flex-grow、flex-shrink、flex-basis 属性实现自动伸缩。在这个例子中，item1 占据弹性盒子内部的剩余空间，跟其他弹性盒子平分剩余的空间。使用 flex-shrink 属性让 item2 具有更高的收缩能力，以使得其他弹性盒子在空间不足时先被缩小。同时，通过给 item3 设置一个固定的 flex-basis 值，使它不会被 flex-shrink 缩小到过小。