flex容器的主要特性是它可以调整其子元素的宽度或高度去填充可用的空白区，以最优的方式达到兼容不同屏幕大小。
使用方法
注意： float,clear和vertical-align在子元素上都不会起作用，也不会让它脱离文档流。
//块状父元素
.flex-container {
display: -webkit-flex; /* Safari */
display: flex;
}
//行内父元素(基本不用)
.flex-container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}
父元素的属性
- 1.flex-direction子元素的排序方向
flex-direction:row; //从左到右挨着排开
flex-direction:row-reverse; //从右到左挨着排开
flex-direction:row; //从上到下挨着排开
flex-direction:row; //从下到上挨着排开
- 2.flex-wrap控制（flex容器）以单行还是多行布局
flex-wrap: nowrap; //子元素 不换行，并会自动伸缩，以适应（flex容器）的宽度
flex-wrap: wrap; //子元素一行放不下，会按照从左到右，从上到下的顺序显示成多行
- 3.justify-content 指定 子元素在当前（flex容器）X轴线上的对齐方式
justify-content:flex-start; //靠左对齐
justify-content:flex-end; //靠右对齐
justify-content:center; //靠中间对齐
justify-content:space-between; //靠两侧边缘对齐(相同的空间间隔)
justify-content:space-around; //以相同的空间间隔显示(不靠两端)
- 4.align-items指定 子元素在当前（flex容器）Y轴线上的对齐方式(也是横向排序)
align-items: flex-start; //所有子元素上对齐
align-items: flex-end; //所有子元素下对齐
align-items: center; //所有子元素在父元素中间对齐
align-items: baseline; //所有子元素按照她们的文本基线在父元素中间对齐
- 5.align-content
align-content:stretch;//多行相等间距对齐
align-content: flex-start;//多行从左到右，从上到下依次排成多行
align-content: center;//多行在父元素垂直方向中间 ，从左到右依次排满
align-content: space-between;//多行子元素的行与行之间以相等的间隔显示
子元素的属性
- 1.order子元素的排列顺序(小的排在前边)
.flex-item0 {
-webkit-order:1 ; /* Safari */
order:1;
}
.flex-item1 {
-webkit-order:0 ; /* Safari */
order:0;
}
//.flex-item1排在.flex-item0前边
- 2.flex-grow当（flex容器）存在剩余空间时，可以用flex-grow这个属性来确定子元素的拉伸比例
.flex-item0 {
flex-grow:1;
}
.flex-item1 {
flex-grow:3;
}
.flex-item0占父元素的 1/4，.flex-item1占父元素的 3/4
- 3.flex-shrink 当 （flex容器）空间不足时，可以用flex-shrink这个属性来确定子元素的收缩比例。
默认情况下，所有 flex item（flex项）都可以收缩，但如果我们将它设置为 0（不收缩），它们将保持原来的大小。
.flex-item {//保持原来的大小
-webkit-flex-shrink:0 ; /* Safari */
flex-shrink:0 ;
}
- 4.align-self子元素默认对齐方式
align-self:flex-start//上对齐
align-self:flex-end//下对齐
align-self:center//中间对齐
align-self:baseline//中间文本 对齐
align-selfstretch;//拉伸到最大高度
