Flex布局知识精缩复习

Flex布局：

display:flex 或 display:inline-flex   

Webkit内核的浏览器，必须加上-webkit前缀，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。父元素设置flex可使得子元素横向排列，并且就算父元素没有设置高度也不会出现坍塌

 

容器的属性：

决定主轴方向，即项目排列方向

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

 

一条轴线排不下，如何换行

flex-wrap: nowrap | wrap | wrap-reverse

 

以上两属性的简写

flex-flow: <flex-direction> || <flex-wrap>

 

定义项目在主轴上的对齐方式

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

 

定义项目在交叉轴上的对齐方式，stretch默认值，未设置占满整个容器高度

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

 

定义了多根轴线的对齐方式（多行）

align-content: flex-start | flex-end | center | space-between | space-around | stretch

 

项目的属性：

项目的排列顺序

order: <integer>

 

项目的放大比例，默认为0，即使有位置也不放大

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

 

项目的缩小比例，默认为1，如果位置不够项目将缩小

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

 

分配多余空间之前项目占据的主轴空间，默认项目本来大小

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

 

三者的缩写，默认 0 1 auto，后两个属性可选

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

 

项目设置对齐方式，可覆盖align-items，默认auto

align-self: auto | flex-start | flex-end | center | baseline | stretch