在使用以下代码前不要忘了加这个哦

display: flex;
display: inline-flex;//行内布局

1、flex-direction 主轴方向 2、flex-wrap 换行方式

3、flex-flow 缩写 4、justify-content/flex-pack 主轴对齐方式

5、align-items 交叉轴对齐方式 6、align-self 对齐方式

7、align-content 多根轴线的对齐方式 8、order 排列顺序

9、flex-grow 放大比例 10、flex-shrink 缩小比例

11、flex-basis 缩小比例 12、flex 缩写

1、flex-direction 主轴方向

//row（默认）    ：主轴为水平方向，起点在左端。
//row-reverse   ：主轴为水平方向，起点在右端。
//column        ：主轴为垂直方向，起点在上沿。
//column-reverse：主轴为垂直方向，起点在下沿。
flex-direction: row | row-reverse | column | column-reverse;

2、flex-wrap 换行方式

//nowrap       不换行
//wrap         正常换行，第一行在上方
//wrap-reverse 正常换行，第一行在下方
flex-wrap: nowrap | wrap | wrap-reverse;

3、flex-flow 缩写

//flex-direction属性和flex-wrap属性的简写形式
flex-flow: <flex-direction> || <flex-wrap>;

4、justify-content/flex-pack 主轴对齐方式

//flex-start（默认）：左对齐
//flex-end         ：右对齐 
//center           ：居中
//space-between    ：两端对齐，项目之间的间隔都相等
//space-around     ：每个项目两侧的间隔相等
justify-content: flex-start | flex-end | center | space-between | space-around;

flex-pack: start[默认] | center | end | justify | distribute

5、align-items 交叉轴对齐方式

//flex-start    ：起点对齐。
//flex-end      ：终点对齐。
//center        ：中点对齐。
//baseline      : 第一行文字的基线对齐。
//stretch（默认）：占满整个容器的高度
align-items: flex-start | flex-end | center | baseline | stretch;

6、align-self 对齐方式

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

7、align-content 多根轴线的对齐方式

//flex-start    ：起点对齐
//flex-end      ：终点对齐
//center        ：中点对齐
//space-between ：两端对齐，轴线之间平均分布
//space-around  ：轴线间隔相等
//stretch（默认）：占满整个轴
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

8、order 排列顺序

//越小越靠前
order: 1;

9、flex-grow 放大比例

flex-grow: 1;

10、flex-shrink 缩小比例

//当都为1，空间不足时，都将等比缩小。
//如果一个为0，其他项目都为1，空间不足时，前者不缩小。
flex-shrink: 1;

11、flex-basis 固定空间

//在分配多余空间之前，项目占据的主轴空间
flex-basis: <length> | auto;

12、flex 缩写

//建议优先使用这个属性
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

参考：

Flex 布局语法教程

可伸缩框属性（Flexible）

参考：

猜你喜欢