1.设置主轴方向(flex-direction:)
首先对盒子设置弹性盒子布局:display: flex;
column:主轴从上到下的垂直方向
row:主轴从左到右的水平方向。默认值
reverse:颠倒,反转,把里面的盒子方向倒转
例如:flex-direction: column-reverse;
flex-direction: row-reverse;
2.设置主轴对齐方式(justify-content:)
flex-start:默认值,从主轴起点开始对齐
flex-end:从主轴终点对齐,不留间隙
center:主轴上居中对齐,不留间隙
space-around:每个项目之间的距离相等
space-between:两端对齐。
3. 设置项目在交叉轴上的对齐方式(align-items:)
center:在交叉轴居中对齐。
flex-start:项目定点与交叉轴对齐
flex-end:项目底部与交叉轴中点对齐
baseline:项目的第一行文字基线对齐
4.设置项目是否换行(flex-wrap:)
当项目过多如:
可以添加(display: flex;)进行弹性盒子布局
然后再输入 (flex-wrap:)进行换行
nowrap:不换行
warp:换行
wrap-reverse:反方向换行
如:flex-wrap: wrap;
5. 结构伪类选择器 (nth-child())
有多个项目时,如:
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
我们可以使用结构伪类选择器对其中一个盒子进行修改
如:
输入后,查看效果则变为: