CSS布局之flex布局
最近项目中涉及到手机端开发，那么flex布局是必不可少的，这里我来重新梳理一下
1. 介绍
flex布局也被成为伸缩盒布局，在flex布局模型中，flex容器的子元素可以在x轴或y轴上进行布局，并且子元素可以伸缩他们的大小，当容器中还有空间它们会伸展以填充容器未使用的空间，当容器空间缩小的时候，他们也会跟着缩小。
2. 应用
2.0 基本概念
主轴与交叉轴,主轴由flex-direction来定义，交叉轴是主轴的垂直方向的轴
- flex-direction:row
- flex-direction:column
2.1 hello world
伸缩盒布局的应用很简单，只需要为容器元素添加display: flex;即可
<article class="container_1">
<section>one</section>
<section>
two <br>
two_1 <br>
two_2 <br>
two_3 <br>
</section>
<section>three</section>
</article>
<style>
body {
margin: 0;
padding: 0;
}
.container_1 {
display: flex;
justify-content: flex-start;
/*平分容器，内容居中*/
/*justify-content: space-around; */
/*平分容器，内容显示在边缘，其余被空白占*/
/*justify-content: space-between;*/
/*内容居中*/
/*justify-content: center;*/
}
.container_1 > section:nth-child(1){
background-color: lightblue;
}
.container_1 > section:nth-child(2){
background-color: pink;
}
.container_1 > section:nth-child(3){
background-color: lightgreen;
}
.container_1 > section:nth-child(4){
background-color: orange;
}
</style>- justify-content: flex-start;如图，内容在flex容器的左侧开始排列，空白显示在右侧
- justify-content: space-around; 如图，空白会被等分然后填充到子元素的左右
- justify-content: space-between; 如图，空白不会出现左右边缘,其余部分空白等分并且进行填充
- justify-content: center; 如图，内容居中，空白均分出现在两侧
- 如果子元素的内容足够多，将如图显示
2.2 align-items
用于定义与主轴垂直方向上子元素的显示方式
- align-items: stretch; 默认值，拉伸
- align-items: center; 不拉伸，居中显示
- align-items: flex-start;不拉伸，在flex布局的开始位置显示
- align-items: flex-end; 不拉伸，在flex布局的结束位置显示
2.3 flex-direction
定义主轴方向，默认主轴为X周，该属性的取值为 row
- flex-direction: row; 主轴为X轴
- flex-direction: column; 主轴为Y轴
2.4 flex-wrap
定义是否可以换行，默认值为nowrap
- flex-wrap:nowrap ,当flex item中的文本足够长的时候也不会导致其他item换行，而是调整其高度以容纳更多内容。
- flex-wrap:wrap ,当flex item中的文本足够长的时候会占满整个容器，然后其他item将会导致换行
2.5 flex-flow
是flex-direction 与 flex-wrap的速写形式。例如
flex-flow: row wrap;
2.6 flex-basis 与 flex-grow
这两个属性定义在flex item上，flex-basis定义了在分配多余空间之前，flex item占据的主轴空间,默认值为auto,与width类似。 flex-grow定了分配多余空间的的规则,例如
<style>
.container_1 {
margin: 0 auto;
width: 600px;
display: flex;
flex-flow: row nowrap;
}
.container_1 > section:nth-child(1){
background-color: lightblue;
flex-basis: 100px;
flex-grow: 1;
}
.container_1 > section:nth-child(2){
background-color: pink;
flex-basis: 100px;
flex-grow: 2;
}
.container_1 > section:nth-child(3){
background-color: lightgreen;
flex-basis: 100px;
flex-grow:1;
}
</style>
<article class="container_1">
<section>flex is a new value added to the CSS display property. Along with inline-flex it causes the element that it applies to to become a flex container, and the element's children to each become a flex item. The items then participate in flex layout</section>
<section>
two <br>
two_1 <br>
two_2 <br>
two_3 <br>
</section>
<section>flex is a </section>
</article>从上面的样式上，我们可以看出，每个section的flex-basis 基础宽度为100px,flex容器总宽度为600px，这样，剩下的空白区域也就是300px，那么这300像素如何风格呢？这时候就要看没有flex item的flex-grow取值，该值默认为auto,但是我们这里是这么指定的，第一个第三个section为1，第二个section为2，也就是说第一个第三个section各占1/4，也就是75px,第二个section占2/4，也就是150px。所以最后第一个第三个section占175px,第二个section占250px.
2.7 flex-basis 与 flex-shrink
flex-shrink 同样应用到flex item元素上，与flex-grow作用相反，flex-grow表示当flex-basis的和小于flex容器宽度的时候，如何分配剩余空间进行宽度的增长。而flex-shrink表示当flex-basis的和大于flex容器宽度的时候，按照哪种比例进行缩小
<style>
.container_1 {
margin: 0 auto;
width: 600px;
display: flex;
flex-flow: row nowrap;
}
.container_1 > section:nth-child(1){
background-color: lightblue;
flex-basis: 300px;
flex-grow: 1;
flex-shrink: 1;
}
.container_1 > section:nth-child(2){
background-color: pink;
flex-basis: 300px;
flex-grow: 2;
flex-shrink: 2;
}
.container_1 > section:nth-child(3){
background-color: lightgreen;
flex-basis: 300px;
flex-grow:1;
flex-shrink: 1;
}
.container_1 > section:nth-child(4){
background-color: orange;
}
</style>flex容器的宽度为600px;而flex item加起来为900px,为了能占满flex容器，flex item必须缩小300px; 那么谁应该缩小呢？这时候要看每个flex item上flex-shrink的定义,然后计算出比例
2.7 flex速写
一般情况下，我们很少使用flex-basis,flex-grow,flex-shrink,而是使用它们的速写形式flex。
flex: flex-grow flex-shrink flex-basis
例如
.container_1 > section:nth-child(1){
background-color: lightblue;
flex-basis: 1 1 300px;
}
.container_1 > section:nth-child(2){
background-color: pink;
flex-basis:2 2 300px;
}
.container_1 > section:nth-child(3){
background-color: lightgreen;
flex-basis:1 1 300px;
}3. flex实际应用
在实际开发过程中，我们经常会应用到网格布局，一般采用的是float技术，然后封装成一个网格框架进行应用，例如bootstrap的网格布局。但是网格布局也有一些缺陷，比如，它具有两个维度，行与列，再有些项目中我们希望我们的item是一维的，例如：
<style>
body {
margin: 0;
padding: 0;
}
.container_1 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.container_1 > section {
margin: .5em;
flex: 1 1 200px;
background-color: orange;
}
</style>
<article class="container_1">
<section>
one <br>
one <br>
one <br>
one <br>
</section>
<section>two</section>
<section>three</section>
<section>four</section>
<section>five</section>
<section>six</section>
<section>seven</section>
<section>
one <br>
one <br>
one <br>
one <br>
</section>
<section>two</section>
<section>three</section>
<section>four</section>
<section>five</section>
<section>six</section>
<section>seven</section>
</article>
当然，有些同学觉得这样可能和需求不相匹配了，因为我们的代码中flex item的宽度会发生变化，这时候只需要 flex: 0 1 200px;即可，