浏览器支持情况
除了任性的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的属性一样