首先呢，先去看文档，了解flex是什么，这里不做赘述。

将子元素在水平方向进行布局：

示例：

<div class="row-ll" style="width: 660px; height: 230px; border: 1px solid red;">  <div style="width: 110px; height: 110px;">我是div</div>  <img src=https://news.ytian678.com/skin/default/image/nopic.gif alt=https://news.ytian678.com/skin/default/image/nopic.gif style="width: 110px; height: 110px;" />  <span>text</span></div>

nerror="javascript:errorimg.call(this);">

3.垂直方向靠顶部，水平方向两端对齐

.row-lsb {  display: flex;  flex-direction: row;  align-items: flex-start;  justify-content: space-between;}

nerror="javascript:errorimg.call(this);">

5. 垂直方向靠顶部，水平方向平均分隔（间隔距离相等）

.row-lse {  display: flex;  flex-direction: row;  align-items: flex-start;  justify-content: space-evenly;}

nerror="javascript:errorimg.call(this);">

7. 垂直方向可以设置为：靠顶部、居中、靠底部

将子元素在垂直方向进行布局：

2. 垂直方向靠居中，水平方向靠左侧

.col-lc {  display: flex;  flex-direction: column;  align-items: flex-start;  justify-content: center;}

4. 垂直方向平均间隔（中间间隔的宽度为两边间隔宽度的2倍），水平方向靠左侧

.col-lsa {  display: flex;  flex-direction: column;  align-items: flex-start;  justify-content: space-around;}

6. 垂直方向靠底部，水平方向靠左侧

.col-le {  display: flex;  flex-direction: column;  align-items: flex-start;  justify-content: flex-end;}

前面6个是（水平方向）靠顶部的效果，且（水平方向）居中、靠底部的代码类似，如下：

.col-cl {  display: flex;  flex-direction: column;  align-items: center;  justify-content: flex-start;}.col-cc {  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;}.col-csa {  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-around;}.col-csb {  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;}.col-cse {  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-evenly;}.col-ce {  display: flex;  flex-direction: column;  align-items: center;  justify-content: flex-end;}

.col-cl {  display: flex;  flex-direction: column;  align-items: flex-end;  justify-content: flex-start;}.col-cc {  display: flex;  flex-direction: column;  align-items: flex-end;  justify-content: center;}.col-csa {  display: flex;  flex-direction: column;  align-items: flex-end;  justify-content: space-around;}.col-csb {  display: flex;  flex-direction: column;  align-items: flex-end;  justify-content: space-between;}.col-cse {  display: flex;  flex-direction: column;  align-items: flex-end;  justify-content: space-evenly;}.col-ce {  display: flex;  flex-direction: column;  align-items: flex-end;  justify-content: flex-end;}

三、更多属性

我参考了vuetify的预置css，flex.css可以这么写：

.d-flex {  display: flex;}.flex-row {  flex-direction: row;}.flex-wrap {  flex-wrap: wrap;}.flex-wrap-reverse {  flex-wrap: wrap-reverse;}.flex-row-reverse {  flex-direction: row-reverse;}.flex-column {  flex-direction: column;}.flex-column-reverse {  flex-direction: column-reverse;}.align-start {  align-items: flex-start;}.align-center {  align-items: center;}.align-end {  align-items: flex-end;}.justify-start {  justify-content: flex-start;}.justify-center {  justify-content: center;}.justify-space-around {  justify-content: space-around;}.justify-space-between {  justify-content: space-between;}.justify-space-evenly {  justify-content: space-evenly;}

有补充请在评论区留言。

nerror="javascript:errorimg.call(this);">

顶一下()     踩一下()