Flex 弹性盒子
任何容器都可以制定flex布局，包括行内元素。
设为Flex布局后，float，clear，vertical-align属性失效。
采用Flex布局的元素称为 ”Flex容器”,简称”容器”
当一个元素设为容器后,它包裹的所有子元素都会自动成为容器
的成员.成为Flex的项目(Flex Item) 简称”项目”
容器默认有两个方向的轴线,水平的轴线称为”主轴(main axis)”,
垂直的轴线称为”交叉轴(cross axis)”也可以称为”从轴”或”副轴”
设置在容器上的6个属性:
flex-direction [定义项目(子元素)的主轴方向]
flex-wrap [定义项目(子元素)的排列是否超出换行]
flex-flow [定义项目的排列方式]
justify-content[定义项目横轴方向的对齐方式]
align-items [定义项目纵轴方向的对齐方式]
align-content [定义项目纵轴方向的排列方式]
语法：flex-direction : row | row-reverse | column | column-reverse
属性:
1.row（默认值）： 主轴为水平方向，起点在左端。
2.row-reverse： 主轴为水平方向，起点在右端。
3.column： 主轴为垂直方向，起点在上沿。
4.column-reverse： 主轴为垂直方向，起点在下沿。
flex容器
语法:flex-wrap : nowrap | wrap | wrap
属性:
1.nowrap（默认值）： 不换行
2.wrap: 换行,第一行在上面
3.Wrap-reverse： 换行,第一行在线
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
语法：flex-wrap : <flex-direction> || <flex-wrap>;
属性: 1.默认值 : row nowrap
例子
.btn{ background: #fff; color: #ff6700; border: 1px solid #b0b0b0; display: inline-block; width: 158px; height: 38px; border-color: #ff6700; padding: 0; margin: 0; align-items: center; }子元素属性：
1.Order: [定义项目的排列顺序]2.flex-grow: [定义项目的放大比例]3.flex-shrink: [定义了项目的缩小比例]4.flex-basis: [定义了在分配多余空间之前，项目占据的主轴空间]5.Flex: [缩写属性]6.align-self: [允许单个项目有与其他项目不一样的对齐方式]
转载于:https://www.cnblogs.com/zhangzongke/p/10952611.html
