弹性盒（flex）布局

CSS3 之后，我们常见的布局方案有以下三种，他们使用场景也有所不同：

• 浮动方案：图片文字环绕效果 MDN 官网-float

• 弹性盒方案：单行或单列布局 MDN 官网-flex

• 网格方案：多行多列布局 MDN 官网-gird

本文会从如下 3 方面对 flex 布局展开介绍：

• flex 布局的基础概念
• flex 布局的常见属性
• flex 布局的使用场景

1.flex 布局的基础概念

1.1 启动 flex 布局（生成弹性容器和弹性项目）

启动弹性盒布局的方式非常简单，只需在父元素上设置display: flex;,那么父元素就称为弹性容器，其直接的子元素就被称为弹性项目。 默认情况下：弹性项目沿着主轴依次排列，侧轴拉伸。

1.2 主轴与侧轴（交叉轴）

主轴由 flex-direction 属性 定义，侧轴垂直于主轴（如上图所示），我们使用 flex 布局 的所有属性都跟这两根轴线有关，使用该概念极其重要。 默认情况 flex-direction 为 row 时：主轴为 X 轴（左右）方向，侧轴则为 Y 轴（上下）方向。

1.3 起始线（Start）和终止线（End）

起始线和终止线受 flex-direction 属性 控制。 默认情况 flex-direction 为 row 时：

• 当我们是在书写英文，那么主轴的起始线是左边，终止线是右边。
• 如果我们是在书写阿拉伯文，那么主轴的起始线是右边，终止线是左边。

2.flex 布局的常见属性

下面我将从弹性容器与弹性项目的角度来对 flex 布局常见属性进行介绍：

2.1 弹性容器的常见属性

弹性容器的常见属性有：justify-content、align-items、flex-direction、flex-wrap 和 flex-flow。

2.1.1 justify-content --> 主轴排列

通过justify-content属性，可以影响主轴的排列方式,默认值为 flex-start。

2.1.2 align-items --> 侧轴排列

通过align-items属性，可以影响侧轴的排列方式,默认值为 stretch。

2.1.3 flex-direction --> 更改方向

通过flex-direction属性可更改主轴方向，默认值为 row。

2.1.4 flex-wrap --> 主轴换行

通过align-items属性，可以控制当主轴剩余空间不足时是否进行换行；默认值为 nowrap ，即当主轴剩余空间不足时，按照压缩比例进行压缩。 但如果给弹性容器设置flex-wrap: wrap，则不会压缩，直接换行显示。

尽管如此，多行多列仍然推荐使用网格布局。

2.1.5 flex-flow --> flex-direction 和 flex-wrap 缩写

/* 弹性容器中 */
flex-flow: row wrap; /* flex-direction flex-wrap */
/* 上面等价于 */
flex-direction: row;
flex-wrap: wrap;

另外弹性容器还有align-content属性等一系列不常用属性，align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

2.2 弹性项目的常见属性

弹性项目的常见属性有：justify-content、align-items、flex-direction、flex-wrap 和 flex-flow。

2.2.1 flex-grow --> 拉伸比例

通过flex-grow属性，可以控制当主轴方向上弹性容器有额外空间时，具体每个弹性项目的拉伸比例，默认值为 0。

2.2.2 flex-shrink --> 压缩比例

通过flex-shrink属性，可以控制当主轴方向上弹性容器空间不足时，具体每个弹性项目的压缩比例，默认值为 1。

2.2.3 flex-basis --> 初始尺寸

通过flex-shrink属性，可以控制在主轴方向上具体每个弹性项目的初始尺寸，默认值为 auto。

2.2.4 flex --> flex-grow flex-shrink 和 flex-basis 缩写

/* 某个弹性项目中 */
flex: 0 1 auto; /* flex-grow flex-shrink flex-basis*/
/* 上面等价于 */
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

另外弹性项目还有align-self 属性、order属性等一系列不常用属性；

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

3.flex 布局常见的使用场景

flex 布局常见的使用场景有：元素居中、导航栏和固定底部栏。

3.1 元素居中

效果图：

<div class="flex-container">
  <div class="flex-item"></div>
</div>

.flex-container {
  /*弹性容器 */
  width: 300px;
  height: 300px;
  border: 2px dashed #dcb63f;
  background-color: #fff2c7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-item {
  /*弹性元素 */
  width: 100px;
  height: 100px;
  background-color: #d7e8fe;
}

3.2 导航栏

效果图：

<div class="nav-container">
  <p>导航栏样式一:</p>
  <nav class="nav1">
    <ul>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3 is longer</a></li>
      <li><a href="#">Page 4</a></li>
    </ul>
  </nav>

  <p>导航栏样式二:</p>
  <nav class="nav2">
    <ul>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3 is longer</a></li>
      <li><a href="#">Page 4</a></li>
    </ul>
  </nav>
  <p>导航栏样式三:</p>
  <nav class="nav3">
    <ul>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3 is longer</a></li>
      <li class="push-right"><a href="#">Page 4</a></li>
    </ul>
  </nav>
</div>

/* 公共样式代码 */
* {
  margin: 0;
  padding: 0;
}
.nav-container {
  width: 700px;
}
li {
  list-style: none;
  background-color: #fff2c7;
  border: 1px solid #dcb63f;
  padding: 10px;
}
a {
  text-decoration: none;
  color: inherit;
}
nav {
  border: 1px solid #d7e8fe;
  padding: 5px;
  margin: 5px 0;
}
p {
  color: red;
  font-size: 20px;
  font-weight: bold;
}
/* 核心代码 */
/* 导航栏样式一*/
.nav1 ul {
  display: flex;
  justify-content: space-between;
}
/* 导航栏样式二*/
.nav2 ul {
  display: flex;
}
.nav2 li {
  flex: auto;
}
/* 导航栏样式三*/
.nav3 ul {
  display: flex;
  margin: 0 -10px;
}
.nav3 li {
  margin: 0 10px;
}
.nav3 .push-right {
  margin-left: auto;
}

3.3 固定底部栏

效果图：

<div class="card">
  <div class="content">
    <p>
      内容区域：Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Doloribus sint officiis soluta corrupti voluptate tenetur impedit id
      obcaecati eaque! Blanditiis modi quibusdam, ullam repellendus consequatur
      quam deserunt eaque dolorem eligendi?
    </p>
  </div>
  <footer>固定底部栏</footer>
</div>

.card {
  /*弹性容器 */
  width: 200px;
  height: 400px;
  border: 2px dashed #dcb63f;
  display: flex;
  flex-direction: column;
}
.card .content {
  /*内容区域 */
  flex: 1 1 auto;
}
footer {
  /*固定底部栏 */
  background-color: #d7e8fe;
}

结语

这是我目前所了解的知识面中最好的解答，当然也有可能存在一定的误区。

所以如果对本文存在疑惑，可以在评论区留言，我会及时回复的，欢迎大家指出文中的错误观点。

最后码字不易，觉得有帮助的朋友点赞、收藏、关注走一波。