Flex 布局语法教程 鲁中O

一、【语法】Flex-弹性布局（注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。）

display:flex;  /*首先需要写出来的*/
flex-direction: row | row-reverse | column | column-reverse;  /* （默认）左到右 | 右到左 | 上到下 | 下到上 */  --- 排列方式
flex-wrap: nowrap | wrap | wrap-reverse; /* （默认）不换行 | 换行，第一行在上| 换行，第一行在下| 下到上 */       ---- 是否换行
flex-flow: <flex-direction> <flex-wrap>; /* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/
justify-content: flex-start | flex-end | center | space-between | space-around; /* （默认）左对齐| 右对齐| 居中| 两端对齐 | 间隔相等分散*/   --- 水平
align-items: flex-start | flex-end | center | baseline | stretch; /* 上对齐| 下对齐 | 中心点对齐| 项目内第一行文字基线对齐| （默认）占满整个高度 */   
align-content: flex-start | flex-end | center | space-between | space-around | stretch; /* 与交叉轴的起点对齐 | 与交叉轴的中点对齐 | 与交叉轴两端对齐，轴线之间的间隔平均分布。| 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 | （默认值）轴线占满整个交叉轴。*/

二【兼容性】display:flex;     -----定义在父元素上，子元素会成为--行元素

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
display: -moz-box; /* Firefox 17- */  
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
display: -moz-flex; /* Firefox 18+ */  
display: -ms-flexbox; /* IE 10 */  
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ 

三【兼容性】flex-direction: row | row-reverse | column | column-reverse;     ----- 定义在父元素上，可修改子元素排列方向（上下左右）

-webkit-box-orient: vertical;/* 09版 */
-webkit-flex-direction: column;/* 12版 */
-moz-flex-direction: column; /* Firefox 18+ */
-ms-flex-direction: column; /* IE 10 */
-o-flex-direction: column;
flex-direction: column; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ 

三   【兼容性】 /* 子元素的某一个      用于改变源文档顺序显示   谁大谁在后面 */

-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
-ms-flex-order: 2;              /* TWEENER - IE 10 */
-webkit-order: 2;               /* NEW - Chrome */
order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */

三【兼容性】其他写法

/*display*/
.display_flex{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.display_flex > *{ display: block; }
.display_inline-flex{ display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; }
.display_inline-flex > *{ display: block; }
/*伸缩流方向*/
.flex-direction_column{ -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
/*主轴对齐*/
.justify-content_flex-center{ -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
.justify-content_flex-end{ -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; }
.justify-content_flex-justify{ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
/*侧轴对齐*/
.align-items_flex-start{ -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; }
.align-items_flex-end{ -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; }
.align-items_center{ -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.align-items_baseline{ -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; }
/*伸缩性*/
.flex_auto{ -webkit-box-flex: 1; -ms-flex: auto; -webkit-flex: auto; flex: auto; }
.flex_1{ width: 0; -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; }
/*显示顺序*/
.order_2{ -webkit-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; }
.order_3{ -webkit-box-ordinal-group: 3; -ms-flex-order: 3; -webkit-order: 3; order: 3; }

本文来源：https://www.jianshu.com/p/49cdc1a0b69b

https://www.baidu.com/link?url=W5eaymxkH31533zzGDSqvyOnCPTbZEBGDJPKVLK-XktY_eFQkhtkXedfnE36q0bNly-NtfsUyNQrtRkAgekdK_&wd=&eqid=df9b512200147ccf000000035ce0fc11