Kyokyo

你还早2万年呢

flex布局

发表于 分类于

flex

display

display 属性定义了一个弹性盒子容器，容器是展现为行内或块状由给定的值决定，此时，它的所有子元素进入 flex文档流，成为伸缩项目。

1
2
3
#flex-container {
	display: flex;
}

定义行内容器的 flex布局：

1
2
3
#flex-container {
	display: inline-flex;
}

对于 safiri浏览器，要加上 webkit 前缀：

1
2
3
4
#flex-container {
	display: webkit-flex;
	display: flex;
}

注：CSS的 columns在伸缩容器上没有效果；float、clear和 vertical-align在伸缩项目上没有效果。

flex-direction

flex-direction 定义主轴的方向，有4个值，分别代表了 x轴和 y轴的正方向和反方向。

1
2
3
#flex-container {
	flex-direction: row | row-reverse | column | column-reverse;
}
  • row：主轴为水平轴，方向从左到右，默认值。
  • row-reverse：主轴为水平轴，方向从右到左。
  • column：主轴为垂直轴，方向从上到下。
  • column-reverse：主轴为垂直轴，方向从下到上。

flex-wrap

flex-wrap定义 item是否换行显示。

1
2
3
#flex-container {
	flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap：不换行，默认值。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。

flex-flow

flex-flow是 flex-direction和 flex-wrap的合并，同时定义了主轴方向和换行方式，默认 row nowrap。

1
2
3
#flex-container {
	flex-flow: <'flex-direction'> || <'flex-wrap'>;
}

justify-content

justify-content定义了 item在主轴上的对齐方式，有剩余空间才起作用。

1
2
3
#flex-container {
	justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  • flex-start：主轴起始方向对齐，默认。
  • flex-end：主轴结束方向对齐。
  • center：主轴上居中对齐。
  • space-between：主轴上两端对齐，第一个item在起始位置，最后一个在结束位置。
  • space-around：主轴上等分间距，两边与容器间距是item间距的一半。
  • space-evenly：所有间距相等。

align-items

align-items定义了项目在交叉轴上的对齐方式。

1
2
3
#flex-container {
	align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start：交叉轴上起始方向对齐。
  • flex-end：交叉轴上结束方向对齐。
  • center：交叉轴上居中对齐。
  • baseline： 交叉轴上项目的第一行文字基线对齐。
  • stretch：交叉轴上拉伸对齐。

align-content

当设置为 wrap或 wrap-reverse，项目换行时会出现多根主轴，此时用 align-content设置平行主轴对齐方式。

1
2
3
#flex-container {
	align-content: flex-start | flex-end | center | space-bewteen | space-around | stretch;
}
  • flex-start：多条平行的主轴在交叉轴的起始位置对齐。
  • flex-end：多条平行的主轴在交叉轴的结束位置对齐。
  • center：多条平行的主轴在交叉轴上居中对齐。
  • space-between：多条平行的主轴在交叉轴上两端对齐，第一条在交叉轴起始位置，最后一条在交叉轴结束位置。
  • space-around：多条平行的主轴在交叉轴上等分间距对齐，第一条和最后一条到两端的间距是间距的一半。
  • stretch：多条平行的主轴在交叉轴上拉伸对齐，默认。

order

order定义项目在主轴上的排列顺序。数值小的靠前，默认为0.

1
2
3
#flex-item {
	order: -1;
}

flex-grow

flex-grow定义了项目的放大比例，负值无效。

1
2
3
#flex-item {
	flex-grow: 1;
}

注：值为0时不分配剩余空间。

flex-shrink

flex-shrink定义了缩放比例，默认值auto（项目本来的大小）。

1
2
3
#flex-item {
	flex-shrink: 1;
}

flex-basis

flex-basis定义了在分配多余空间前，项目占据的主轴空间。浏览器根据这个属性计算主轴是否有多余空间。默认auto，即项目本来大小。

1
2
3
#flex-item {
	flex-basis: auto;
}

flex

flex是 flex、flex-shrink、flex-basis的简写形式，默认0，1，auto。

align-self

align-self定义了单个 item在交叉轴上的对齐方式。