Flex布局的常用布局方式一、Flex布局简介人们已经逐渐放弃了低版本的浏览器，所以flex布局是现在首选的布局方式。Flex布局也称为弹性布局。任何标签都可以使用flex布局，内联元素也可以使用flex布局。当标签使用flex布局时，子元素的float、clear等属性会失效。.box{display:flex;}使用了display:flex属性的标签，我们称之为容器，它的所有子元素自动成为容器的成员，我们称之为项目。容器默认有两个轴，主轴（默认水平）和侧轴（默认侧轴），项目默认沿主轴排列。二、容器的属性容器有六种常用的属性。flex-direction//控制主轴的方向justify-content//设置主轴的对齐方式align-items//控制侧轴的对齐方式align-content//当侧轴的内容有多个时lines,设置侧轴的对齐方式flex-wrap//控制项目中是否允许换行。flex-flow//flex-direction和flex-wrap的简写如果没有特别说明，下面的代码演示模板都是这样的。1232.1flex-directionflex-direction决定了主轴的方向，即项目的排列方向。.box{flex-direction:row;}.box{flex-direction:row-reverse;}.box{flex-direction:column;}.box{flex-direction:column-reverse;}2.2justify-contentjustify-content用于控制项目在主轴上的对齐方式。.box{justify-content:flex-start;}.box{justify-content:flex-end;}.box{justify-content:center;}.box{justify-content:space-around;}.box{justify-content:space-between;}.box{justify-content:space-evenly;}2.3flex-wrap容器的flex-wrap属性用于控制item是否允许换行。123456789101112131415。box{flex-wrap:wrap;}.box{flex-wrap:wrap-reverse;}2.4align-itemsalign-items属性用于控制项目在侧轴上的对齐方式。.box{align-items:flex-start;}.box{align-items:flex-end;}.box{align-items:center;}2.5align-content当侧轴有多条线时，可以使用align-设置横轴对齐的内容。1234567891011121314153.3flex项目使用的属性flex其实是flex-grow（放大）、flex-shrink（缩小）和flex-basis的简写，默认值为01auto。我们平时设置的flex:1其实就相当于flex-grow:1，也就是剩余空间的宽度。12
