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 —属性集合

flex-direction

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

row（默认值）：子元素从左往右排列，起点在左边。

row-reverse：子元素从右往左排列，起点在右边。

column：子元素从上往下排列，起点在顶部。

column-reverse：子元素从下往上排列，起点在底部。

flex-wrap

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

nowrap（默认）：不换行。

wrap：换行，第一行在上方,或者第一列右方。

wrap-reverse：换行，第一行在下方。

flex-flow

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

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简直完美好吗？！！！

align-items

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

flex-start：顶部对齐

flex-end：底部对齐

center:垂直居中

baseline ：项目的第一行文字的基线对齐

stretch:拉伸元素（不能固定高度）

FlexItems —属性集合

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

order: <integer>;

flex-grow：放大比例，在有剩余空间时,都剩余空间的分割

0为不分割

当多个item设置flex-grow不为0时，等比分割。（在aside固定宽度article自适应时可以玩）

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

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

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

flex-basis占据固定空间。

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

flex

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

优先使用auto (1 1 auto) 弹性和 none (0 0 auto)固定。

6. align-self与align-items的属性一样