CSS原有的很多布局都是基于float和display:table布局，但是在新一代CSS3出现之后，出现了现在流行的flex布局方案，其布局理解极大地迎合了当前前端的布局需求-结束发展！什么是弹性布局？Flex是FlexibleBoxModel的缩写，可以直观理解为“弹性布局”，是对盒模型的一种灵活表达。可以动态修改子元素的宽高！详见W3Cschool教程！兼容性支持--------------------------------------------开始学习！----------------------------------------------------------弹性框的父元素称为弹性容器弹性容器的子元素称为弹性子元素弹性项有两个概念，分别是主轴和横轴，如下图：（子元素沿主轴依次排列，侧轴与主轴垂直）弹性容器属性fle-direction:row|row-reverse|column|column-reverse/*设置主轴方向决定弹框子元素的排列方向*/row(默认值)row-reversecolumncolumn-reverseflex-wrap:nowrap|wrap|wrap-reverse/*是否换行时子元素超出容器的边界*/nowrap（默认）warpwrap-reverseflex-flow:[flex-direction]||[flex-wrap]/*设置灵活子元素的排列方式*/justify-content:flex-start|flex-end|center|space-between|space-around/*对齐方式flexbox中子元素在主轴上的nt*/flex-start（靠近start边）flex-end（靠近end边）center（居中对齐）space-beteen（两端对齐）endsandclosetothesidetwice)space-around(两边距离均匀分布，左边的距离是中间距离的0.5倍)align-items:flex-star|flex-end|center|baseline|stretch/*设置flexbox子元素在侧轴上的对齐方式，类似于justify-content属性*/stretchch(默认，高度自动延伸)flex-star(从横轴开始)flex-end(从横轴结束)baseline(元素内容基线对齐)center(居中对齐，横轴中间)align-content:flex-start|flex-end|center|space-between|space-around|stretch/*当侧轴为空且有多行时，设置flexbox元素在侧轴上的对齐方式*/flex-start（多个元素和行breaks)flex-endcenterspace-betweenspace-aroundstretch(heightfillsthescreen)elasticbox-child元素属性order：子元素的顺序，值小的在前，可以为负值（设置在子元素上)flex-grow：设置子元素展开比例，不允许负值，默认为0（元素展开）flex-shrink：设置子元素收缩比例，不允许负值，默认为1（宽度收缩）flex-basis：弹性子元素的收缩基值，不允许负值flex-none:none:composite属性设置弹性子元素的分配空间方式，同上作为对齐项
