flex 布局

部分代码举例

<!--使用举例-->
<style>
       .root{
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between
       }
       .item{
           width: 200px;
           height: 300px;
       }
</style>

<div class="root">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
</div>

flex 容器

属性简介

flex指定容器 display: flex 当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失，容器上可支持 flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

flex-direction: 决定主轴的方向(即项目的排列方向)
                row: 主轴为水平方向，起点在左端
                row-reverse：主轴为水平方向，起点在右端 
                column：主轴为垂直方向，起点在上沿 
                column-reverse：主轴为垂直方向，起点在下沿
                
flex-wrap:      决定容器内项目是否可换行
                nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
                wrap：项目主轴总尺寸超出容器时换行，第一行在上方
                wrap-reverse：换行，第一行在下方
                
flex-flow:      flex-direction 和 flex-wrap 的简写形式，感觉没有用，分开写就不要管这个属性
                举例： flex-flow: <flex-direction> || <flex-wrap>;
         
justify-content：定义了项目在主轴的对齐方式。                   
                flex-start: 左对齐[默认值]
                flex-end：右对齐
                center：居中
                space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙
                space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。 
                
align-items:    定义了项目在交叉轴上的对齐方式
                stretch 即如果项目未设置高度或者设为 auto，将占满整个容器的高度[默认值]。
                flex-start：交叉轴的起点对齐
                flex-end：交叉轴的终点对齐
                center：交叉轴的中点对齐
                baseline: 项目的第一行文字的基线对齐
                
align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
               当你 flex-wrap 设置为 nowrap 的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。
               当你 flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线，这时候你就需要去设置多条轴线之间的对齐方式了。                
               建立在主轴为水平方向时测试，即 flex-direction: row, flex-wrap: wrap 
               默认值为 stretch
               flex-start：轴线全部在交叉轴上的起点对齐
               flex-end：轴线全部在交叉轴上的终点对齐
               center：轴线全部在交叉轴上的中间对齐
               space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。
               space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍                                                                           

模块属性

有六种属性可运用在 item 项目上 order,flex-basis,flex-grow,flex-shrink,flex,align-self

order:      定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
flex-grow:  定义项目的放大比例 默认值为 0，即如果存在剩余空间，也不放大
            当所有的项目都以 flex-basis 的值进行排列后，仍有剩余空间，那么这时候 flex-grow 就会发挥作用了。            
            如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。(如果有的话)            
            如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。            
            当然如果当所有项目以 flex-basis 的值排列完后发现空间不够了，且 flex-wrap：nowrap 时，此时 flex-grow 则不起作用了，这时候就需要接下来的这个属性。
flex-shrink: 定义了项目的缩小比例 默认值为 1，即如果空间不足，该项目将缩小，负值对该属性无效
             如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。             
             如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小
flex:        flex-grow, flex-shrink 和 flex-basis的简写      
align-self: 允许单个项目有与其他项目不一样的对齐方式       
            默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch