Voyz's Studio.

弹性布局相关参数

字数统计: 349阅读时长: 1 min
2019/04/07 Share

块级元素

1
2
3
.box{  
  display: flex;  
display: -webkit-flex; /* Safari */
}

内联元素

1
.box{
  display: inline-flex;
}

容器属性

flex-direction

主轴的方向(即项目的排列方向)

1
row | row-reverse | column | column-reverse

flex-wrap

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

1
2
nowrap | wrap | wrap-reverse
不换行 | 换行 | 倒序换行

flex-flow

flex-direction属性和flex-wrap属性的简写形式

1
<flex-direction> || <flex-wrap>

justify-content

项目在主轴上的对齐方式

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

align-items

项目在交叉轴上如何对齐

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

align-content

定义了多根轴线的对齐方式
如果项目只有一根轴线,该属性不起作用

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

项目属性

align-self

单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto

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

order

项目的排列顺序。数值越小,排列越靠前,默认为0。

1
order: <integer>

flex-grow

项目的放大比例,默认为0

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

flex-shrink

项目的缩小比例,默认为1

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

flex-basis

项目占据的主轴空间

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

flex

flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto

1
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
CATALOG
  1. 1. 块级元素
  2. 2. 内联元素
  • 容器属性
    1. 1. flex-direction
    2. 2. flex-wrap
    3. 3. flex-flow
    4. 4. justify-content
    5. 5. align-items
    6. 6. align-content
  • 项目属性
    1. 1. align-self
    2. 2. order
    3. 3. flex-grow
    4. 4. flex-shrink
    5. 5. flex-basis
    6. 6. flex