CSS flex布局

flex布局基础

任何一个容器都可以指定为flex布局

//	盒状模型
.box{
	display: flex
}

//	行内元素
.box{
    display: inline-flex
}

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

//	主轴方向
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

当主轴排列不下所有子内容时，flex-wrap决定如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
//	nowrap为默认

三种分别对应:

//	flex-direction与flex-wrap的合并写法
//	默认为row nowrap
.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

//	定义主轴上的对齐方式，默认为flex-start
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

//	定义主轴在cross轴上的对齐方式，默认为stretch
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}