Flex布局

使用display、float、position等传统布局方式实现水平居中、垂直居中等布局很不方便，而利用Flex布局，我们可以轻松实现各种页面布局。

采用 Flex 布局的元素，称为 Flex 容器，简称”容器”。容器的所有子元素自动成为容器成员，称为 Flex 项目，简称”项目”。

容器默认存在两根轴：水平的主轴和垂直的交叉轴。项目默认沿主轴排列。

1. 设置Flex布局

   • 容器：display:flex;
   • 行内元素：display:inline-flex;
   • webkit浏览器：display:-webkit-flex;

   注意 设置flex后子元素的float、clear、vertical-align等样式将失效。

2. 容器属性

   flex-direction: row | row-reverse | column | column-reverse;flex-wrap: nowrap | wrap | wrap-reverse;flex-flow: <flex-direction> || <flex-wrap>;justify-content: flex-start | flex-end | center | space-between | space-around;align-items: flex-start | flex-end | center | space-between | space-around | stretch;

3. 项目属性

   order: <interger>;flex-grow: <number>;flex-shrink: <number>;flex-basis: <length> || auto;flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]align-self: auto | flex-start | flex-end | center | baseline | stretch;