CSS3-flex伸缩布局

概述

CSS3 中在布局方面做了非常大的改进，新增了伸缩布局通过该布局方式开发人员对块级元素的布局排列会变得十分灵活，其强大的伸缩性，在响应式开中发挥极大的作用。

将指定元素的 CSS 样式中的 display 属性设置为 flex，这个元素就是一个伸缩布局的容器，其内部的子元素会从左到右水平排列（效果很像浮动）。

简单例子：

.Box {
  width: 800px;
  /* 设置父级盒子为 flex */
  display: flex;
  background-color: deepskyblue;
}

.Box div {
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid red;
}

<div class="Box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

当为元素设置 flex 布局后，这个元素就有了主轴和侧轴之分

• 主轴：用来配置Flex项目，默认是水平方向，从左到右

• 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上到下

修改主轴方向

主轴和侧轴用来决定子元素的排列、对齐方式，主轴和侧轴的方向也不是固定不变的，可以通过 flex-direction 属性来进行修改。

flex-direction 的属性值：

• row：主轴方向水平向右，子元素从左往右进行排列，默认值
• column：主轴方向竖直向下，子元素从上往下进行排列
  

  

• row-reverse:主轴方向水平向左，子元素从右往左进行排列
  

  

• column-reverse:主轴方向是竖直向上，子元素从下往上进行排列
  

  

主轴对齐方式

通过 justify-content 属性可以设置子元素在主轴上的对齐方式；就像段落中的文字的对其方式（左对齐，右对齐、两端对齐等）

justify-content 的属性值：

• flex-start 子元素以主轴的起点对齐，默认的对齐方式
• flex-end 子元素以主轴的终点对齐
  

  

• center 子元素以主轴的中间位置对齐
  

  

• space-around 子元素在主轴上均匀分布（所有子元素均分主轴方向剩余空白空间）
  

  

• space-between 第一个贴主轴起点，最后一个贴主轴终点；其他子元素均匀分布，保证每个盒子之间的空隙是相等的（中间子元素均分主轴方向剩余空白空间）。