flex布局
2020-05-24 本文已影响0人
马甲要掉了
弹性布局
任何一个容器都可以指定为 Flex 布局（行内元素、块级元素都可以）。
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
常见父项属性：
- flex-direction:主轴方向
flex-direction: row | row-reverse | column | column-reverse;
- flex-wrap：如果一条轴线排不下，如何换行。
flex-wrap: nowrap | wrap | wrap-reverse;
- flex-flow:是flex-direction属性和flex-wrap属性的简写形式
- justify-content:项目在主轴上的对齐方式。
justify-content: flex-start(左对齐) | flex-end（右对齐） | center | space-between（先贴两边再平分剩余空间） | space-around（平分剩余空间）;
- align-items：单行 侧轴对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
- align-content： 多行 侧轴对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
常见子项属性：
flex: 子项每份份数
