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： 居中
flex布局对齐方式space-between：两端对齐，元素之间的间隔都相等。
space-around：每个元素两侧的间隔相等。
4.align-items
align-items⽤于控制元素在交叉轴上对齐⽅式。
应⽤场景：配合justify-content属性使⽤，完成⼦元素的垂直⽔平居中flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项⽬的第⼀⾏⽂字的基线对齐。
stretch（默认值）：如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度。
5.⼀些不常⽤的属性就不说明了，⽤兴趣的可以去了解⼀下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。