Flex 布局将成为未来布局的首选方案

官网图片

Flex 布局参考

重点：设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效；

flex-direction 内部元素的排列方式：从左到右、从右到左、从上到下、从下到上；

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

flex-wrap 子元素的换行方式：不换行；换行，第一行在上面；换行，第二行在上面；

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

flex-flow 是子元素的排列方式和换行方式的简写；

.box {
	flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content 设置子元素的水平对齐方式；

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start(默认值)：左对齐 flex-end: 右对齐 center:居中 space-between:两端对齐，项目之间的间隔都相等
space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items 设置子元素的垂直对齐方式；

.box {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content 设置多个元素组成的整块的对齐方式

.box {
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex:1 均分 若多个box都有数值，则按数值比分配空间

flex:1

更多关于flex