网站建设中的flex布局

flex布局也称作弹性布局，随着响应式的使用普通的浮动和定位有着局限性，而flex布局就是来解决这种局限性的。

任何一个元素都能使用flex布局，通过给父元素设置flex布局来控制子元素的位置和排列方式，同时子元素的float，clear和vertical-align属性都将失效。通常给flex布局的的父元素设置属性来控制具体的子元素的位置和排列方式，主要包括：

flex-direction：设置主轴的方向。

justify-content：设置主轴上的子元素排列方式。

flex-wrap：设置子元素是否换行。

align-content：设置侧轴上的子元素的排列方式（多行）。

align-items：设置侧轴上的子元素排列方式（单行）。

flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap。

也可以设置子元素的属性，例如：

order：指定了项目的排列顺序。

flex-grow：定义了在有可用空间时的放大比例。

flex-shrink：定义了在空间不足时的缩小比例。

flex-basis：指定了项目在分配空间前的初始大小。

flex：这是flex-grow、flex-shrink和flex-basis的简写形式。

align-self：允许单个项目独立于其他项目在交叉轴上对齐。

某个属性之间能够具体的设置不同的属性值了更加具体的设置子元素的布局样式，现在大部分的布局都采用的更加便捷的flex布局方法来满足各种复杂的布局。