弹性盒子flex

<div class="">
    <div class="bao as1" style="background-color: #4CAF50">div1</div>
    <div class="bao as2" style="background-color: brown">div2</div>
    <div class="bao as3" style="background-color: darkblue">div3</div>
</div>

已知一个div下有3个元素

默认布局如下：

 

给父元素添加

display: flex;
flex-direction: row-reverse;

 

开启弹性盒子：

让盒子里的元素排成一行。

盒子里面元素高度相同。

可以控制弹性盒子中元素的伸缩性如下：

添加

 

.as1 {
        flex: 1;
    }
    .as2{
        flex: 2;
    }
    .as3{
        flex: 3;
    }

 

 

 

控制盒内元素排列方向：

flex-direction: 

row :默认 水平方向从左到右

row-reverse：水平方向从右到左

column：垂直方向，从上到下

colum-reverse：从下到上

 

 

 

伸缩换行

flex-wrap：

nowarp:默认不换行

wrap：多行显示会换行

wrap-reverse：换行并颠倒顺序

 

 

主轴对齐

 justify-content:

flex-start  开始位置靠齐

flex-end   结束为止靠齐

center     居中对齐

space-between   平均分布在行里，第一个项目靠开始位置，最后一个靠结束为止

space-around 平均分布，两端保留一半空间。

space-between效果如下

 

 

侧轴对齐：

align-items：flex-start,flex-end,center,baseline,stretch

stetch默认值，整个项目拉满容器

baseline：伸缩项目根据第一行文字的基线对齐。