CSS学习--Flex布局

flex

display: flex;
display: -webkit-flex; /* Safari */
display: inline-flex

order

order: 1;

1. 所有 flex 项默认的 order 值是 0。
2. order 值大的 flex 项比 order 值小的在显示顺序中更靠后。

flex-direction

指定了内部元素是如何在 flex 容器中布局的

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

flex-wrap

指定 flex 元素单行显示还是多行显示

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

flex-flow

flex-direction 和 flex-wrap 的简写

flex-flow:  ;

flex-grow

flex增长系数

flex-grow: ;

flex-shrink

flex 元素的收缩规则(flex 元素仅在默认宽度之和大于容器的时候才会发生收缩)

flex-shrink: ;

flex-basis

flex 元素在主轴方向上的初始大小

flex-basis: auto | ;

flex

flex-grow，flex-shrink和flex-basis的缩写

flex:   ;

align-item

交叉轴方向上的对齐方式

align-item: normal | stretch |  | [ ?  ];

 = center | start | end | self-start | self-end | flex-start | flex-end

 = [ first | last ]? baseline

 = unsafe | safe
/* 常用 */
align-item: normal | stretch | center | flex-start | flex-end;

justify-content

弹性容器主轴的元素之间的空间分配方式

justify-content: normal |  | ? [  | left | right ];

where

 = space-between | space-around | space-evenly | stretch

 = center | start | end | flex-start | flex-end

 = unsafe | safe
/* 常用 */
justify-content: normal | space-between | space-around | space-evenly | stretch | center | flex-start | flex-end;