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;