HTMl弹性布局

开发工具与关键技术：弹性布局
作者：li

弹性布局
一直以来，我们前端开发的布局方案是基于盒模型，但现在移动端的网页如果按pc端的来写，pc端的布局就不适应了，Flex布局意思是弹性布局，它可以让我们更灵活。需要注意的是设为Flex后，子元素的float，clear和vertical-align属性会失败。
采用flex布局的元素，称为Flex容器。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

下面我用一个简单的示例说下弹性布局，html如下

Css部分的相关属性： 相关属性来自学习资料

display;flex; 就可以设置弹性布局。其属性特点如下；
flex-direction: column;/*主轴为垂直方向，起点在上沿
flex-direction: column-reverse;/主轴为垂直方向，起点在下沿。
flex-direction: row;/（默认值）：主轴为水平方向，起点在左端。
flex-direction: row-reverse;/*主轴为水平方向，起点在右端。

flex-wrap属性：默认情况下，项目都排在一条线（又称"轴线"）上。
flex-wrap属性定义，如果一条轴线排不下，如何换行*/
flex-wrap: nowrap;/nowrap（默认）：不换行。
flex-wrap: wrap;/wrap：换行，第一行在上方。
flex-wrap: wrap-reverse;/：wrap-reverse 换行，第一行在下方。/

flex-flow：性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: row nowrap;/默认值/

justify-content属性*/
justify-content属性定义了项目在主轴上的对齐方式。
以下对其方式：前提是flex-direction 值为 row 即主轴线 从左到右
justify-content: flex-start;/*flex-start（默认值）：左对齐
justify-content: flex-end;/*flex-end：右对齐

效果如下图，普通的盒模型设置下的盒子，若页面被压缩会使格子自行换行

在使用弹性布局后，如果可视页面被压缩后，的效果如下；
在网页窗口被拉伸的时候，弹性布局不会像传统的盒模型那样，压缩后会自动换行，而是在窗口变小后依旧保持原布局