这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战
1, 布局简介
谈到flex布局，第一想到的就是垂直水平居中方式，对比传统的布局方式，需要定位，使用起来比较繁琐， 通过Flex本能的想到justify-content:center与align-items:center。
1,布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。
我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，
就得借助position，float，或display属性，这便是传统的盒模型做法。
<div>1</div>
<div>2</div>
<div>3</div>
2, flex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性
flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操
作容器中子元素(项目)的排列方式, flex布局属性主要由容器属性和项目属性构成
display:flex
2, Flex 初识
先简单介绍一下，要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器。
然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素默认会沿主轴排列，可以控制flex子元素在主轴上伸缩，主轴方向可以设置，
相关的css属性分为两类，一类是给flex容器设置的，一类是给flex子元素设置的
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
.box{
display: flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
3，容器属性
容器的6大属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1，flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）
取值：row(默认) | row-reverse | column | column-reverse
row，即横向排列，项目排列顺序为正序1-2-3；
row-reverse同为横向排列，但项目顺序为倒序3-2-1。
column 与row相反，为纵向排列，项目顺序为正序1-2-3，
column-reverse同为纵向排列，项目顺序为倒序3-2-1
2，flex-wrap
flex-wrap默认情况下，项目都排在一条线（又称"轴线"）上，如果一条轴线排不下，决定如何换行
取值：nowrap(默认) | wrap | wrap-reverse
nowrap表示不换行,用于控制项目是否换行
wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行
wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与
wrap相反。
3，flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
4，justify-content
justify-content属性定义了项目在主轴上的对齐方式
用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
flex-start（默认值）：左对齐
flex-end：右对齐
center: 居中
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右
margin。
5，align-items
用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，
取值： stretch(默认) | flex-start | flex-end | center | baseline
flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：
center使用最多，自然不会陌生，在纵轴中心位置排列：
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
baseline: 项目的第一行文字的基线对齐
注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。 6，align-content
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的12个项目我均没有设置高度
取值：stretch(默认) | flex-start | flex-end | center | space-between | space-around | space-evenly
space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍
space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。
align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。
4，项目属性
简单来说项目属性。容器属性是加在容器上的，那么项目属性呢，就是写在项目上的 常见的也是6大属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1, order
取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。
2, flex-grow
取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。
假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。
1, 假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。
2, 假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后
项目的两倍
3, flex-shrink
取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设
置了固定宽度，也会缩小。
但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。
4, flex-basis
取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了
flex-basis，权重会width属性高，因此会覆盖widtn属性。
5, flex
取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩
小与宽度。
该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。
6, align-self
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-
items属性。如果没父元素，则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
5，实战布局
CSS圣杯布局 && 双飞翼布局
两者作用和区别：
圣杯布局和双飞翼布局解决的问题都是一样的。两边固定宽度，中间自适应的三栏布局，已经由此演变出来的类似其他
布局格式。中间布局代码要写在 前边，保证第一个渲染
区别：两者在布局的前三点方法是一样的，通过float浮动，和margin-left负值，让三元素并排显示。行成三栏布
局，区别在中间盒子处理的方式。怎么做才能不把中间盒子的内容覆盖住。让其完全显示。
圣杯布局是通过父元素设置padding-left和padding-right为左右两边的盒子留空间。然后左右两盒子通过相对定
位，改变left和right的值。移动后不遮挡中间div
双飞翼布局是直接在中间div内部创建子div，用于放置内容。并且设置子div的margin-left和margin-right,为左右
两个div留出位置，左右两个盒子不需要设置position:relative和right,left属性。个人感觉比圣杯布局要简单一
些。具体操作参考下面代码
1，圣杯布局特点
（1）父元素包含三个元素，分别设置他们左浮动
（2）中间的盒子宽度设置为100%，自适应，并且在三个元素的最前面显示，第一个渲染
（3）左右两边使用margin-left的负值，使他们与中间的盒子同行，（左边：-100%，右边：-右边盒子的宽度）
（4）中间的盒子width:100%后，需要父元素通过padding设置左右两边空白，为左右两边的盒子留同等大小的空间
（5）设置左右两边position:relative,通过left移动位置
2，双飞翼布局：
（1）（2）（3）同上
（4）给中间元素设置子元素，并给其设置其margin-left 和 margin-right值，为左右盒子留位置
- 项目代码随后补上
