flex布局教程

Posted 2020-09-07 LOVEwitch

flex布局，弹性盒子

1.display：flex 设置flex布局后，子元素的float、clear和vertical-align属性将失效

2.flex-direction 决定主轴的方向（即项目的排列方向）

属性：row|row-reverse|colum|column-reverse

3.flex-wrap 设置换行方式

nowrap（不换行）|wrap（换行，第一行在上方）|wrap-reverse（换行，第一行在下方）

4.flex-flow：<flex-direction>||<flex-wrap>

5.justify-content 设置项目在主轴上的对齐方式

flex-start(左对齐)|flex-end（右对齐）|center（居中）|space-between（两端对齐，项目之间的间隔都相等）|space-around（每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框间隔大一倍）

6.align-items 设置交叉轴上的对齐方式

flex-start|flex-end|center|baseline（项目的第一行文字的基线对齐）|stretch（占满整个容器高度）

7.align-content 设置多根轴线的对齐方式

flex-start|flex-end|center|space-between|space-around|stretch

8.order 设置项目的排列顺序，数值越小，排列越靠前，默认为0

9.flex-grow 设置项目的放大比例，默认为1

若一个项目的flex-grow为2，其他为1，则为2的占据为1的2倍

10.flex-shrink 设置项目的缩小比例，默认为1

11.flex none|[<flex-grow>|<flex-shrink>?||<flex-basis>]

12.align-self 设置单个项目与其他项目不一样的对齐方式

auto|flex-start|flex-end|center|baseline|stretch

 

 

 

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html