Flex布局

flex布局

一、设置弹性盒子布局

主轴方向

二、fiex-direction:设置主轴方向

1.column：主轴就是从上到下的垂直方向。

2.column-reverse：主轴就是从下到上的垂直方向。

3.row：主轴就是从左到右的水平方向，默认值。

4.row-reverse：主轴就是从右到左的水平方向。

 

主轴方向对齐方式

三、justify-content:设置主轴方向上的对齐方式

1.fiex-start:默认值，项目从主轴起点开始对齐，不留间隙。

2.fiex-end：从主轴终点对齐，不留间隙。

3.center:主轴上居中对齐，不留间隙。

4.space-around：每个项目之间的距离相等。

5.space-between:两端对齐。

交叉轴对齐方式

四、align-items:设置项目在交叉轴上对齐方式

1.center：设置交叉轴居中对齐。

2.flex-start:项目顶点与交叉轴对齐。

3.flex-end:项目底部与交叉轴终点对齐。

4.baseline:项目的第一行文字基线对齐。

五、设置flex布局；设置主轴上居中对齐，不留间隙；设置交叉轴居中对齐：

display: flex;

    justify-content: center;

    align-items: center;  

 换行方式

 六、flex-wrap:设置项目是否换行

1.nowarp：不换行

2.warp：换行

3.warp-reverse：反方向换行

 

 七、设置弹性布局；设置交叉轴居中对齐；设置主轴居中对齐；不留间隙：

display: flex;

   align-items: center;

   justify-content: center;

 结构伪类选择器

八、结构伪类选择器 nth-child()

.box:nth-child(5){

   background-color: aqua;

}