flex属性

flex布局

display： flex 容器有六种属性

一、flex-direction   主轴方向 row水平左 row-reverse水平右 column垂直上 columen-reverse垂直下( 4个属性值)

• flex-direction： row 默认主轴水平方向，左侧为起点
  

     

• flex-direction：row-reverse 默认主轴水平方向，右侧为起点

     

• flex-direction：column 主轴为垂直方向，起点在上

    

• flex-direction：column-reverse 主轴为垂直方向，起点在下

    

二、flex-wrap 一条轴线挤不开，如何换行  nowrap默认不换，wrap正换，  wrap-reverse倒换  3个属性   

<span>wrap</span>

<div class="box">

    <div class="item red">1</div>

    < div class = "item green" > 2 </ div >

    < div class = "item aqua" > 3 </ div >

    < div class = "item yellow" > 4 </ div >

    < div class = "item gray" > 5 </ div >

    < div class = "item pink" > 6 </ div >

    < div class = "item blue" > 7 </ div >

    < div class = "item orange" > 8 </ div >

    < div class = "item Fuchsia" > 9 </ div >

</ div >

<style>------------------css样色，其他颜色自定义

  body {

        background-color : #E6E6FA ;

    }

.box {

    width : 300px ;

    display : flex ;

    flex-wrap : {{ wrap}} ;

    }

.item {

    width : 50px ;

    height : 50px ;

    line-height : 50px ;

    text-align : center ;

}

</style>  

• flex-wrap: nowrap 默认 不换行 里面的盒子自适应

   

• flex-wrap：wrap 换行，按正序排列

  

• flex-wrap：wrap-reverse 换行，倒序排列

  

三、flex-flow  是flex-direction 和 flex-wrap的简写形式。 默认是row nowrap 解释为 主轴为水平方向，左侧为起点，不换行。

  

四、justify-content  主轴上的对齐方式  （5个属性）

• justify-content: flex-start 左对齐

• justify-content: flex-end 右对齐

• justify-content: center; 居中

• justify-content: space-between 两端对齐中间等距

• justify-content: space-around 两侧距离是每项间距的一半

五：align-item 交叉轴上的对齐 5个属性 假设交叉轴从上到下

flex-start | flex-end | center | baseline | stretch

.box {

    width : 300px ;

    border : 1px solid black ;

    display : flex ;

    flex-direction : column;

    align-items : flex-start ;

}

• align-item: flex-start 交叉轴的起点 

• align-item:flex-end 交叉轴的终点对齐

• align-item: center 居中