做公司网站怎么做手机版百度seo培训

1.1 单项目

1

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

.box {display: flex;
}

2

设置项目的对齐方式，就能实现居中对齐和右对齐。

justify-content,调整子元素在主轴上的对齐方式

.box {display: flex;justify-content: center;
}

3

.box {display: flex;justify-content: flex-end;
}

4

设置交叉轴对齐方式，可以垂直移动主轴。

align-items,调整子元素在侧轴上的对齐方式

.box {display: flex;align-items: center;
}

5

.box {display: flex;justify-content: center;align-items: center;
}

6

.box {display: flex;justify-content: center;align-items: flex-end;
}

1.2 双项目

.box {display: flex;justify-content: space-between;
}

1

.box {display: flex;flex-direction: column;justify-content: space-between;
}

2

.box {display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}

3

.box {display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;
}

4

.box {display: flex;
}.item:nth-child(2) {align-self: center;
}

.box {display: flex;justify-content: space-between;
}.item:nth-child(2) {align-self: flex-end;
}

1.3 三项目

.box {display: flex;
}.item:nth-child(2) {align-self: center;
}.item:nth-child(3) {align-self: flex-end;
}

1.4 四项目

1

.box {flex-wrap: wrap;justify-content: space-between;}

2

.box {flex-wrap: wrap;justify-content: space-between;align-content: space-between;}

3

<div class="box"><div class="column"><span class="item"></span><span class="item"></span></div><div class="column"><span class="item"></span><span class="item"></span></div>
</div>

.box {display: flex;justify-content: space-between;}.column {display: flex;flex-direction: column;justify-content: space-between;
}

1.5 六项目

1

.box {display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;
}

2

.box {display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-between;align-content: space-between;
}

1.6 九项目

.box {display: flex;flex-wrap: wrap;
}

参考https://www.cnblogs.com/hellocd/p/13584058.html