css flex布局初识

css传统的布局方式是盒子模型，通过display、position、float属性来决定元素布局方式，主要有：行内布局、块布局、相对布局、绝对布局、流式布局。该方式对于实现很多常用布局比较困难，样式定义复杂，布局不够灵活，且易出错，例如元素居中，元素等间隔显示，对齐。

鉴于此，flex应运而生，意为弹性布局,当前所有浏览器都支持。当元素的display="flex"时，该元素即为flex布局容器(container)，其所有子元素自动成为容器成员(flex item)。

问题：容器本身相对页面采用的是何种布局方式？

容器上定义了6种布局属性：方向（flex-direction）、换行（flex-wrap)、流向(flex-flow)、横向排布（justify-content)、纵向排布（align-items) 、内容排布（align-content)

成员的布局属性：

• order   元素排序，越小越靠前
• flex-grow 元素放大，当空间大于元素空间时，元素适应方式，默认0，不放大
• flex-shrink 元素缩小方式，默认1，缩小
• flex-basis 元素原本大小 
• flex  grow\shrink\basis的组合
• align-self align-items的覆盖属性，可改写元素align方式。