flexbox model

文章目录

1. 基础&术语
2. 属性
1. 2.1. 父级的属性–flex-container
2. 2.2. 次级属性(flex items)

基础&术语

main axis - flex container 主轴，flex-items 沿着这个轴布局。具体哪个方向取决于 flex-direction 属性 (see below).
main-start | main-end - flex-items 在 flex-container 中从 main-start 到 main-end 布局.
main size - flex-item main-axis 方向的长度
cross axis - 垂直于 main-axis 的轴。即垂直于 flex-items 排列布局方向的轴。
cross-start | cross-end - Flex-item 布局垂直方向布局从 cross-start 到 cross-end.
cross size - flex-item cross-axis 方向长度

属性

属性	描述	可取值
display	指定 HTML 元素盒子类型	flex,inline-flex
flex-direction	指定了弹性容器中子元素的排列方式	row,column
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行	wrap,nowrap,wrap-reverse
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式	flex-start,flex-end,center,space-around,space-between
align-self	在弹性子元素上使用覆盖容器的 align-items 属性	flex-start,flex-end,center
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式	flex-start ,flex-end,center,stretch,baseline
align-content	修改 flex-wrap 属性的行为，类似align-items, 但不是设置子元素对齐，而是设置行对齐	flex-start,flex-end,center,space-around,space-between,stretch
order	设置弹性盒子的子元素排列顺序	integer
flex	设置弹性盒子的子元素如何分配空间	integer
flex-basis	指定 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。	integer
flex-grow	元素的扩大比率	integer
flex-shrink	元素的收缩比率	integer

父级的属性–flex-container

flex-direction

1
2
3

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

1
2
3

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap (default): 所有 items 都在一行显示
wrap: flex items 将从上到下多行显示。
wrap-reverse: 将从下到上多行显示。

flex-wrap 可视化demo
使用 demo的时候调整浏览器大小

justify-content

main-axis 方向 flex-items 布局方式。

1
2
3

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

justify-content: demo

align-items

cross-axis 方向 flex-items 布局方式

1
2
3

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

align-content

类似align-items, 但不是设置子元素对齐，而是设置行对齐

1
2
3

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

次级属性(flex items)

order

元素排列顺序

1
2
3

.item {
  order: <integer>; /* default is 0 */
}

flex-grow

元素的扩展比率

1
2
3

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink

元素的收缩比率

flex-basis

flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

align-self

在弹性子元素上使用。覆盖容器的 align-items 属性。

1
2
3

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

引用：

CSS3 弹性盒子(Flex Box)
A Complete Guide to Flexbox
Complete Guide to Flexbox