Flex弹性布局

Flex弹性布局

开启弹性盒：dispaly：flex
一、语法添加到父容器上的
1、flex-direction 布局排列方式（主轴排列方式）
（1）row：横向，默认值。（从左往右排列)
（2）row-reverse：横向，与row相反。（从右往左排列）
（3）colum：纵向。（从上往下排列）
（4）colum-reverse：纵向，与colum相反（从下往上排列）


2、flex-wrap：换行
（1）nowrap：不换行，默认值。
（2）wrap：换行。
（3）wrap-reverse：反向换行。


3、jusitify-content：决定主轴方向上子项的对齐分布方式（主轴对齐方式）
（1）flex-start：主轴顶端对齐，默认。
（2）flex-end：主轴末端对齐。
（3）center：主轴中间对齐
（4）space-between：两端对齐。
（5）space-around：自动分配空间。
（6）space-evenly：匀称平等分配空间


4、aligin-items：每一行中的子元素对齐方式侧轴对齐方式
（1）flex-start：侧轴顶端对齐，默认。
（2）flex-end：侧轴末端对齐。
（3）center：侧轴中间对齐


5、align-content:与justify-content相反（行与行之间的对齐方式）
（1）flex-start：顶端对齐
（2）flex-end：底端对齐。
（3）center：中间对齐
（4）space-between：两端对齐。
（5）space-around：自动分配空间。
（6）space-evenly：匀称平等分配空间


二、语法添加到子容器上的
1、order：排序。


2、flex-grow：扩展（想看到扩展效果必须要有空隙）
0：默认值。
1：扩展。（会把空白区域全部占满）


3、flex-shrink：收缩
1：默认值.。（大于0小于1收缩小一些，大于1收缩大一些）
0：不收缩。


4、flex-basis：与flex-grow和flex-shrink很像
flex-grow和flex-shrink：设置一个比例值。
flex-basis：设置一个具体值。


5、algin-self：与align-items操作相似
区别：algin-self只针对某一子项进行操作。


弹性布局中常用的语法：
dispaly：flex； flex-direction； justify-content； align-items； flex
弹性布局优势：做一维布局。

逆战班