关于flex弹性布局

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>

扫描二维码关注公众号，回复： 9957115 查看本文章

</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

  

更多详细：http://www.runoob.com/w3cnote/flex-grammar.html