flex教程，flex布局实例教程

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

1.2 双项目

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

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

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

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

.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 四项目

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

HTML代码如下。

CSS代码如下。

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

1.5 六项目

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

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

本文地址：IT问答频道 https://www.hkm168.com/itwenda/935428_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！