Flex 布局

Flex 布局
撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

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

以矩形为列子 九宫格
1.上左

  display: flex;

2.上中

 display: flex;
justify-content: center;

3.上右

display: flex;
justify-content: flex-end;

4.中左

display: flex;
align-items: center;

5.中心

display: flex;
justify-content: center;
align-items: center;

6.下中

display: flex;
justify-content: center;
align-items: flex-end;

6.下右

display: flex;
justify-content: flex-end;
align-items: flex-end;

双项目
6.上左 和上右

display: flex;
justify-content: space-between;

6.上左和下左

display: flex;
flex-direction: column;
justify-content: space-between;

6.上中和下中

display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;

6.上右和下右

 display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;