flex弹性布局的用法及场景（网页构建详解）

        前端在进行页面的构建时，应该尽量的减少固定的死值，以免出现不同分配率中出现页面错乱的问题，减少定位的使用，多使用flex进行弹性布局，弹性布局，会附带很多属性的默认值，并不是属性不加就代表不存在了，下面讲解一下常用的弹性布局的属性，也分享一下关于页面布局中我的心得，希望能给大家带来帮助共同进步。

一、页面布局心得（直接上干货）

        1.简单说明

                在最初接触css的时候，写的页面都是通过宽高，margin、padding、position来进行布局的，完全不像是在写页面，反而像是在进行一场“拼图”，可能觉得拼的还不错，但是后面换个分配率就支离破碎了，弹性布局就解决了这个问题，使你的“拼图”有了弹性，可以根据不同的分配率进行变化，相对应的还有百分比布局、vw、vh、calc、媒体查询等，以实现不同分配率显示正常的问题，也就是常说的自适应布局。

        2.自己的思路

                对我来说，作为一名合格的前端人员，看到设计图的时候，就应该把页面的结构进行划分，划分成不同的模块，再对模块进行划分，每个模块再进行进一步划分，对于外层元素的宽高不要写死，外层元素的宽高由内层元素决定，一个元素的大小由子元素的大小和padding决定，进一步子元素的大小由更小的元素决定，可以进一步由字体行高决定，padding和margin的使用也需要注意，注意使用的方法，给元素添加padding会改变元素的大小，例如给元素添加背景色的时候，可以理解为吧元素撑大成我们想要的大小，进一步去确定子元素的大小位置，例如：一个页面我们给一个元素宽100%，加一个左右20px的padding，那么他的子元素的宽就是父元素的100%-40px了，这样不同的页面显示都一样，子元素的宽会变化；margin可以用来解决间距的问题，比如写个ul下的li元素需要上下的间距，可以通过margin来解决，可以理解为进一步的控制元素的“位置”。可能整理的不好，或者言不达意，欢迎大家交流。

二、flex弹性布局的主要语法及其适用场景（弹性布局需要加个父元素）

        1.flex-direction

               flex-direction用于改变弹性布局的主轴方向。 加display：flex会默认添加flex-direction：row属性，所以加弹性布局后，子元素的默认主轴方向会从上到小变为从左到右。

                应用场景：上图标下文字展示，设置主轴方向为column

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

        2.flex-wrap

                flex-wrap用于控制元素是否换行，默认nowrap不换行

                应用场景：在弹性布局中，子元素的宽的总和大小大于父元素时，默认不换行，会对子元素造成压缩导致数据显示不全的问题。

• nowrap（默认）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

        3.justify-content

                justify-content用于控制元素在主轴上的对齐方式。默认flex-start左对齐。

                应用场景：常用于元素的两端对齐。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，元素之间的间隔都相等。
• space-around：每个元素两侧的间隔相等。

        4.align-items

                align-items用于控制元素在交叉轴上对齐方式。

                应用场景：配合justify-content属性使用，完成子元素的垂直水平居中

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

           5.一些不常用的属性就不说明了，用兴趣的可以去了解一下