Flex 布局语法教程
一、【语法】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
