1.一个盒子分为三份,面积占比为1:2:1
<style>
section{ display:flex; min-width:500px; max-width:1000px;} 窗口拖动到小于500px或大于1000px则不能再缩放
section div:nth-child(1) { flex:1;}
section div:nth-child(2) { flex:2;}
section div:nth-child(3) { flex:1;}
</style>
<section>
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
</section>
注意:也可以其中一个盒子固定宽度,其余的按所占的份数分剩下的宽度
2.flex-direction (排列方式默认为 水平 ) (给父级盒子添加)
row 水平 row-rerverse 对齐方式与row相反
column 垂直 column-roverse 对齐方式与column相反
3.justify-content (水平对齐)
①写在父级元素中
②space-between 左右盒子贴近父盒子,中间平均分布空白间距
③space-around 相当于给每个子盒子添加了左右margin外边距
4.align-items(针对侧轴(垂直)对齐的)(一般做单行的,比如一行有四五个盒子,这一行垂直居中对齐)
flex-start 上对齐 flex-end 下对齐
5.flex-wrap 控制是否换行
nowrap 默认,不换行,收缩显示(宽度会改变)。
wrap 拆行或拆列
6.align-content 相对于align-items来说,控制多行
必须对父元素设置: display:flex; flex-direction:row; flex-wrap:wrap;
7.flex-flow
是 flex-direction 和 flex-wrap 的简写形式
flex-flow:排列方向 是否换行; (两个之间用空格隔开)
8.order (用CSS来控制盒子的前后顺序,数值小的在前面,默认值为0,可以为负)
主轴:x
侧轴:y