1.默认属性
flex-direction: row;
justify-content: fkex-start;
align-items: stretch;
flex-direction控制下级盒子排列方向,row横向,column纵向
justify-content控制下级盒子的起点,flex-start起点,center中间,flex-end末尾
align-items控制下级盒子对齐,stretch拉伸占满,center居中对齐,flex-end右对齐,flex-start左对齐
2.下级盒子
上级盒子可以控制下级盒子,下级盒子也可以控制自己
flex:1会占满剩余位置,一个flex:2一个flex:1,则比例为2:1。
3.border
加边界线更清晰看到各个盒子的布局
border: 3px solid #FFB6C1;
![](https://ywhao.bitworkshop.cn/wp-content/uploads/2022/06/image-9.png)
方变圆
border-radius: 10px;
![](https://ywhao.bitworkshop.cn/wp-content/uploads/2022/06/image-10.png)
4.margin
margin外边距,margin-top,margin-bottom,margin-left,margin-right
5.居中
母鸡呀,反正三个一起肯定居中了。
align-items: center;
justify-content: center;
text-align: center;
Comments NOTHING