【CSS】Flex布局

总结

1. 任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

2. 行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

3. Webkit 内核的浏览器，必须加上-webkit 前缀。

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

4. 设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

5. 容器的属性

	属性名称	属性描述	可选值	默认值
1	flex-direction	主轴方向（即项目的排列方向）	row | row-reverse | column | column-reverse	row
2	flex-wrap	换行方式（默认情况下不换行）	nowrap | wrap | wrap-reverse	nowrap
3	flex-flow	flex-direction 和 flex-wrap 的简写	<flex-direction> || <flex-wrap>	row nowrap
4	justify-content	项目在主轴上的对齐方式	flex-start | flex-end | center | space-between | space-around	flex-start
5	align-items	项目在交叉轴上对齐方式	flex-start | flex-end | center | baseline | stretch	stretch
6	align-content	多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。	flex-start | flex-end | center | space-between | space-around | stretch	stretch

6. 项目的属性

	属性名称	属性描述	可选值	默认值
1	order	项目的排列顺序。数值越小，排列越靠前。	<integer>，取整数	0
2	flex-grow	项目的放大比例	<number>，负值无效，可以有小数点	0，即如果存在剩余空间，也不放大。
3	flex-shrink	项目的缩小比例	<number>，负值无效，可以有小数点	1，即如果空间不足，该项目将缩小。
4	flex-basis	项目占据的主轴空间；它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。	<length> | auto	auto，即项目的本来大小。
5	flex	flex-grow、flex-shrink 和 flex-basis 的简写	none | [ <flex-grow> <flex-shrink> ? || <flex-basis> ]	0 1 auto，后两个属性可选。 两个快捷值： auto(1 1 auto)、none(0 0 auto)
6	align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。	auto | flex-start | flex-end | center | baseline | stretch	auto，即表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

 

参考：

Flex 布局教程：语法篇

END