Flex 弹性布局（一）

记得第一次接触 CSS 这门语言，那时候的我们没有 Macbook，不知道 Chrome 才是最好用的，也不知道 Sublime。用着古董级的 Dreamweaver，写着   <br/> 硬生生的挤出第一个页面。那个时代的我们不知道什么是 CSS盒模型，也不知道什么弹性布局、响应式布局。CSS 伴随我们一起成长，从最初的 table 布局到现在的各种花式布局框架，一晃眼已经这么多年过去。

前言

本文的全局样式

.main {
  width: 600px;
  height: 300px;
  background-color: #F5F2F0;
}

.item {
  width: 100px;
  height: 100px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 16px;
  font-family: PT Mono;
}

本文的全局 HTML

<div class="main">
  <div id="a" class="item" style="background-color: #FBE9EB;">A</div>
  <div id="b" class="item" style="background-color: #C6E48B;">B</div>
  <div id="c" class="item" style="background-color: #FBE9EB;">C</div>
  <div id="d" class="item" style="background-color: #C6E48B;">D</div>
  <div id="e" class="item" style="background-color: #FBE9EB;">E</div>
  <div id="f" class="item" style="background-color: #C6E48B;">F</div>
  <div id="g" class="item" style="background-color: #FBE9EB;">G</div>
</div>

flex-direction 属性

flex-direction: row; 沿着主轴，从左到右排列，超出容器元素后不换行。

.main {
  display: flex; /* 指定容器为 flex 布局 */
  flex-direction: row; /* 指定容器的排列方向为从左至右(row 是默认值) */
}

row.png

flex-direction: column; 沿着主轴，从上到下排列，超出容器元素后不换行。

.main {
  display: flex; 
  flex-direction: column; /* 指定容器的排列方向为从上至下 */
}

column.png

flex-direction: row-reverse; 沿着主轴，从右到左排列，超出容器元素后不换行。

.main {
  display: flex;
  flex-direction: row-reverse; /* 指定容器的排列方向为从右到左(row 是默认值) */
}

row-reverse.png

flex-direction: column-reverse; 沿着主轴，从下到上排列，超出容器元素后不换行。

.main {
  display: flex; 
  flex-direction: column-reverse; /* 指定容器的排列方向为从下到上 */
}

column-reverse.png

flex-wrap 属性

flex-wrap 用来控制容器内的元素是否换行，它可以取三个值：nowrap wrap wrap-reverse。
nowrap 默认值，也就是不换行。

.main {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

nowrap.png

wrap 自动换行

.main {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

wrap.png

wrap-reverse 自动换行，行的顺序会被反转过来。

.main {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

wrap-reverse.png

flex_flow 属性

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap

.main {
  height: 100%;
  display: flex;
  flex-flow: row wrap; /* 从左到右排列，并且换行 */
}

flex_flow.png