CSS3-flex伸缩布局

概述

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

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

简单例子：

.box {
  width: 800px;
  /* 测试 侧轴对齐方式时使用	 */
  /* height: 200px; */
  /* 设置父级盒子为 flex */
  display: flex;
  background-color: deepskyblue;
}

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

<div class="box">
  <div>1div>
  <div>2div>
  <div>3div>
  <div>4div>
  <div>5div>
  <div>6div>
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 第一个贴主轴起点，最后一个贴主轴终点；其他子元素均匀分布，保证每个盒子之间的空隙是相等的（中间子元素均分主轴方向剩余空白空间）。
  

侧轴对齐方式

侧轴方向与主轴方向垂直，通过 align-items 属性来修改子元素在侧轴方向上的对齐方式

align-items 的属性值：

• flex-start： 子元素以侧轴的起始位置对齐
  
• flex-end： 子元素以侧轴的结束位置对齐
  
• center： 子元素在侧轴上居中对齐
  
• stretch： 默认值，子元素在侧轴方向上会被拉伸到最大，所以使用该属性值时不能给子元素设置高度或宽度（取决于侧轴的方向）

设置子元素换行

flex 布局中的子元素默认不会换行，即使给子元素设置了宽度，会对子元素的宽度进行压缩，子元素仍会排列在一行

举个例子：

.box {
  /* 父元素设置 800px 宽 */
  width: 800px;
  height: 240px;
  /* 设置父级盒子为 flex */
  display: flex;
  background-color: deepskyblue;
}

.box div {
  /* 每个子元素宽度为 100px */
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid red;
}

<div class="box">
  <div>1div>
  <div>2div>
  <div>3div>
  
  <div>16div>
div>

通过 flex-wrap 属性来设置子元素是否换行；默认值为 nowrap 不换行都排列在一行；warp 换行，当父元素的宽度不够时子元素会换行排列

设置 flex-wrap: wrap; 后效果：

分配剩余空间

通过 flex 属性可以设置子元素如何分配父元素剩余的空白空间，该属性是给子元素设置的，值一般以整数数值作为比例值，会根据设置了该属性的元素的比例值进行空白空间的分配

添加了该属性后之前设置的元素的宽会失效

示例：

.box {
  /* 父元素设置 800px 宽 */
  width: 800px;
  display: flex;
  background-color: deepskyblue;
}
.box div {
  /* 每个子元素宽度为 100px */
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid red;
}

/* 子元素设置空白空间的分配 */
.box div:nth-child(1) {
  flex: 1;
}
.box div:nth-child(2) {
  flex: 2;
}
.box div:nth-child(3) {
  flex: 1;
}

<div class="box">
  <div>1div>
  <div>2div>
  <div>3div>
div>

如果不想让设置的宽度失效，不设置 lfex 属性即可；只要父元素的宽度足够元素的宽度会固定不变，这样可以方便的实现两端自适应中间固定不变或中间自适应两端固定不变的效果

两端固定不变：

.box {
  /* 父元素设置宽 100% */
  width: 100%;
  display: flex;
  background-color: deepskyblue;
}

.box div {
  /* 每个子元素宽度为 100px */
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid red;
}
/* 分配剩余空间 */
.box div:nth-child(2) {
  flex: 1;
}

<div class="box">
  <div>1div>
  <div>2div>
  <div>3div>
div>

中间固定不变：

/* 设置空白空间的分配 */
.box div:nth-child(1) {
  flex: 1;
}
.box div:nth-child(3) {
  flex: 1;
}