一、基本概念1）Flex布局元素称为Flex容器，子元素称为Flex项；2）容器中有两个轴：主轴（默认为水平方向）和横轴（默认为垂直方向）；3）任何容器都可以指定为flex布局：blockelements:display:flex;行内元素：display:inline-flex;2.容器属性1）flex-direction作用：项目在主轴上的排列方向取值：row（默认值）row-reversecolumncolumn-reverse2）flex-wrap作用：当容器空间不够时，是否允许项目换行值：nowrap（默认值）wrapwrap-reverse3）justify-content作用：项目在主轴上的对齐方式模式值：flex-start（默认值）flex-endcenterspace-betweenspace-around4)align-items作用：项目在横轴上对齐取值：flex-startflex-endcenterstretch(默认值)baseline5)align-content作用：当有多个轴时，在横轴上对齐（所以只whenflex-wrap:wrapwrap-reverse生效)value:flex-startflex-endcenterspace-betweenspace-aroundstretch(默认值)6)flex-flowflex-flow是flex-direction和flex的缩写-wrap两个属性，默认值为rownowrap。3.项目属性1）flex-grow函数：项目的放大比例，默认值为0，即容器剩余空间不放大2）flex-shrink函数：项目的收缩比例，默认值为1，即容器空间不足3）flex-basis（这里约定主轴方向为row）函数：content–>width–>flex-basis(limtedbymax|min-width)http://gedd.ski/post/the-diff...4)flex函数：flex-growflex-shrink和flex-basis的简写flex:1(等分布局)https://developer.mozilla.org...5)order函数：定义容器中item的顺序，值越小，顺序越高，默认值为0，即使在HTML中-2，-1item在后面，但是因为order的设置，所以在前面6)align-selffunction:允许单个item在横轴上与其他item有不同的对齐方式，优先级高于align-contentValue:auto(默认值)flex-startflex-endcenterbaselinestretch4,实践练习1)等距布局：所有子项flex:12)水平和垂直居中：justify-content和align-items属性容器的设置为中心参考链接：http://gedd.ski/post/the-diff...https://developer.mozilla.org...
