flex常用属性

四、flex常用属性

1、用于父元素的样式

-webkit-box模型【旧】

display:-webkit-box 该属性会将此元素及其直系子代加入弹性框模型中。

box-orient:horizontal|vertical|inline-axis|block-axis|inherit;该属性定义父元素中的子元素是如何排列的。horizontal对父元素的宽度分配划分。

box-pack:start|end|center|justify;box-pack表示父容器里面子容器的水平对齐方式

box-align:start|end|center|baseline|stretch;表示父容器里面子容器的垂直对齐方式。

flex模型 【新】

display:flex; flexbox模型只适用于直系子代

flex-direction: row | row-reverse | column | column-reverse;子元素是如何排列

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;子元素水平排列方式

align-items: flex-start | flex-end | center | baseline | stretch;子元素垂直排列方式

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

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

2、用于子元素的样式

【旧】box-flex:0|任意数字；该属性让子容器针对父容器的宽度按一定规则进行划分。

【新】flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ],默认值 0 1 auto。