flex

首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被置顶为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。

1
2
3

.container {
    display: flex | inline-flex;       //可以有两种取值
}

分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。

需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

有下面六种属性可以设置在容器上，它们分别是：

1	flex-direction: row(默认) \| row-reverse \| column \| column-reverse;

1	flex-wrap: nowrap(默认) \| wrap \| wrap-reverse;;

1	flex-flow: <flex-direction> \|\| <flex-wrap>;

1	justify-content: flex-start \| flex-end \| center(默认) \| space-between \| space-around;

1	align-items: flex-start \| flex-end \| center(默认) \| baseline \| stretch;

1	align-content: flex-start \| flex-end \| center(默认) \| space-between \| space-around \| stretch;

有六种属性可运用在 item 项目上：

1	order: <integer>;

1	flex-grow: <number>;(默认 0)

1	flex-shrink: <number>;(默认 1)

1	flex-basis: <length> \| auto;(默认 auto)

1	flex: none \| [ <'flex-grow'> <'flex-shrink'>? \|\| <'flex-basis'> ] (默认 0 1 auto)

左边固定右边自适应时： flex：0 0 80px;即不伸缩，固定宽度80px;
flex:1 => 1 1 0%; flex:0 => 0 1 0%; flex: 0% => 1 1 0%;

1	align-self: auto \| flex-start \| flex-end \| center \| baseline \| stretch;