Flexbox布局笔记

浏览器支持情况

除了任性的IE，其他浏览器可谓是春光无限，既然如此，那就爽爽的用起来吧。

---

影响

Flex布局以后，子元素的float、clear和vertical-align属性将失效

---

FlexBox

我们使用Flex布局时，都是构建一个Flex盒子，然后去设置盒子里的子元素。
FlexBox有哪些属性
首先肯定是要让她是一个FlexBox

display: -webkit-flex; /* Webkit内核的浏览器*/display:flex;

ok，现在他就是个FlexBox了。
他有什么超能力呢？
呵呵，窝里横呗。

• flex-direction决定子元素排列规则
• flex-wrap决定子元素超行后的排列规则
• flex-flow用来简写flex-direction || flex-wrap;
• justify-content决定子元素水平对齐方式
• align-content决定多行内容垂直对齐方式—只有一行时用align-items

---

FlexBox —属性集合

1. flex-direction

flex-direction: row | row-reverse | column | column-reverse;

row（默认值）：子元素从左往右排列，起点在左边。
row-reverse：子元素从右往左排列，起点在右边。
column：子元素从上往下排列，起点在顶部。
column-reverse：子元素从下往上排列，起点在底部。

1. flex-wrap

 flex-wrap: nowrap | wrap | wrap-reverse;

nowrap（默认）：不换行。
wrap：换行，第一行在上方,或者第一列右方。
wrap-reverse：换行，第一行在下方。

1. flex-flow

 flex-flow: <flex-direction>  <flex-wrap>;//中间以空格隔开

1. justify-content

 justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start:左对齐
flex-end：右对齐
center ：居中
space-around：就像用margin设置左右间隙让<li>将元素等间距排列一样
space-between：两边靠边，中间等分，就在space-around的基础上去掉了两头的margin。用这个排列nav简直完美好吗？！！！

1. align-items

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：顶部对齐
flex-end：底部对齐
center:垂直居中
baseline ：项目的第一行文字的基线对齐
stretch:拉伸元素（不能固定高度）

---

FlexItems —属性集合

1. order:排列顺序，数值越小，排列越靠前，默认为0。

 order: <integer>;

1. flex-grow：放大比例，在有剩余空间时,都剩余空间的分割
   0为不分割
   当多个item设置flex-grow不为0时，等比分割。（在aside固定宽度article自适应时可以玩）

 flex-grow: <number>; /* default 0 */

1. flex-shrink缩小比例,与grow参数设置一样

flex-shrink: <number>; /* default 1 */

1. flex-basis占据固定空间。

 flex-basis: <length> | auto; /* default auto */

1. flex

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

优先使用auto (1 1 auto) 弹性和 none (0 0 auto)固定。
6. align-self与align-items的属性一样