有趣的Flex布局

　　对于刚接触前端的小白，在还原页面样式的时候，往往会遇到页面布局（layout）上的问题，用着生硬的padding来固定盒子的位置，不仅代码看的沉重，还得适应各种浏览器页面，始终没有办法做到统一。接下来，我来介绍一种能把布局写活的方法：Flex布局。

　　Flex布局是Flexible Box的缩写，意思是弹性布局。设为flex布局后，子元素的float（浮动）、clear（清除浮动）和vertical-align（垂直对齐方式）属性会失效。

　　采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。任何一个容器都可以指定为Flex布局（块级元素和行级元素）。

　　Flex有以下六种属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1. flex-direction属性
   

   ---

   　　flex-direction属性决定主轴方向，分别有四个值：row（默认值，左=>右）row-reverse（右=>左）column（上=>下）column-reverse（下=>上）。

   　　当我们在容器里写入flex布局：display：flex，flex-direction属性会默认为row：

   .father{
       display: flex;
       background-color: rgb(192, 185, 185);
   }

   　　它的子元素我设置了四个：a,b,c,d（宽为200px，高为50px，颜色不同）。页面效果为下：

   

   　　改变flex-direction属性的值：row-reverse，页面效果改变为：

   

   　　当flex-direction属性的值变为column时，效果和不写入flex布局一样，及从上到下；column-reverse时则相反。

2. flex-wrap属性
   

   ---

   　　flex-wrap属性规定了

   　    当布局内元素一行盛不下，如何换行。flex-wrap属性有三个值：nowrap（默认，不换行）wrap（第一行在上）wrap-reverse（第一行在下）。

   　　同样是上面的例子，我把每个元素的宽度设置为500px，页面渲染为下：

   

   　　打开布局我们看到：

   

   　　它的样式自动调成页面可容纳宽度，这就是当flex-wrap属性nowrap默认下的效果。改变flex-wrap属性的值为wrap时，页面效果为下：

   

   　　当第一行放不下时，转到第二行继续，依次排列。改变flex-wrap属性的值为wrap-reverse时，页面效果为下：

   

   　　排列顺序为从左到右，从下到上，最后一行放不下，转到倒数第二行，依次排列。

3. flex-flow属性
   

   ---

   　　flex-flow属性包含flex-direction属性和flex-wrap属性，格式为：

   .father{
       display: flex;
       flex-flow: row nowrap;
       background-color: rgb(192, 185, 185);
   }

   　　其中row为flex-direction属性的默认值，nowrap为flex-wrap属性的默认值，这两个值视页面需求更改。

4. justify-content属性
   

   ---

   　　justify-content属性定义了布局内元素在水平方向的对齐方式，其有五个值：flex-staet（默认值，左对齐）flex-end（右对齐）center（居中）space-between（两端对齐，元素之间间隔相等）space-around（每个元素两侧间隔相等）。

   　　justify-content属性往往用在页面右侧按钮，输入框、图片等元素对齐方式。

   　　在我接触的项目里，需要很多放置在页面右侧的按钮，如“新建”按钮，“删除”按钮等，此时我就会用justify-content属性调整按钮的位置，例如：

   <div class="father">
       <button>新建</button>
   </div>

   　　这是一个新建按钮，我需要把它放置到页面的右侧，则我需要设置这个盒子的justify-content属性：

   .father{
       display: flex;
       justify-content: flex-end;
       background-color: rgb(192, 185, 185);
   }

   　　此时按钮就出现在页面右侧。若按钮所在的同一水平的左侧有其他的元素，则可以改变justify-content属性的值为space-between，为下：

   <div class="father">
           <div class="a">a
           </div>
           <button>新建</button>
   </div>
   
   .father{
       display: flex;
       justify-content: space-between;
       background-color: rgb(192, 185, 185);
   }

   　　页面效果为下：

   

   　　然后改改样式就好了。

   　   当使用space-around值时，系统会自己分析页面的宽度以及每个元素对应的位置，如果对页面效果不满意，还可以用padding设置间距。

5. align-items属性
   

   ---

   　  align-items属性定义布局里的元素在垂直水平的对齐方式。align-items属性有五个值：stretch（默认值，未设置高度时与父元素高度相同）flex-start（垂直向上对齐）flex-end（垂直向下对齐）center（垂直居中对齐）baseline（元素第一行文字对齐）

   　   当布局里的每个元素设置了不同的高度时，align-items属性默认值会变为flex-start，效果为下：

   

   　　我设置了父元素高度为300，子元素a,b,c,d高度分别为100，120，40，200。默认为向上对齐。当值变为center时，效果为下

   

   　   为了实现文字对齐，我给这些元素设置了margin-top，分别为20，50，10，30。改变align-items的值为baseline，效果为下：

   

   　　设置padding-top也可以，但是会改变原来元素的高度。

6. align-content属性
   

   ---

　　　　　  若布局容器内有多行元素，则align-content属性起作用，若只有一行元素，则align-content属性不起作用。

　　　　　  align-content属性有六个值：stretch（默认值，所有行占满整个布局）flex-start（于布局顶部对齐）flex-end（于布局底部对齐）center（于布局高度中心对齐）space-between（于顶部和底部对齐，元素间隔相等）space-around（元素上下间隔相等）

　　　　　  align-content属性与justify-content属性类似，一个是水平对齐，一个是垂直对齐。