关于前端:学习-flex-布局后的总结

flex – 弹性布局

在实在的利用场景中，通常会遇到各种各样不同尺⼨和分辨率的设施，为了能在所有这些设施上失常的布局咱们的利用界面，就须要响应式的界⾯设计形式来满⾜这种简单的布局需要。

flex 弹性盒模型的劣势在于开发⼈员只须要申明布局应该具备的⾏为，⽽不须要给出具体的实现⽅式，浏览器负责实现理论布局，当布局波及到不定宽度，散布对⻬的场景时，就要优先思考弹性盒布局。

flex-direction: 调整主轴方向

row：主轴方向为程度向右
column：主轴方向为竖直向下
row-reverse: 主轴方向为程度向左
column-reverse: 主轴方向是竖直向上。

justify-content 次要用来设置 主轴方向的对齐形式

flex-start: 弹性盒子元素将向起始地位对齐
flex-end: 弹性盒子元素将向完结地位对齐。center: 弹性盒子元素将向行两头地位对齐
space-around: 弹性盒子元素会均匀地散布在行里
space-between: 第一个贴右边，最初一个贴左边，其余盒子均分，保障每个盒子之间的空隙是相等的。

align-items 用于调整 侧轴的对齐形式

flex-start：元素在侧轴的起始地位对齐。flex-end：元素在侧轴的完结地位对齐。center：元素在侧轴上居中对齐。stretch：元素的高度会被拉伸到最大（不给高度时, 才拉伸）。

flex-wrap 属性管制 flex 容器是单行或者多行, 默认不换行

nowrap：不换行（默认），如果宽度溢出，会压缩子盒子的宽度。wrap：当宽度不够的时候，会换行。

align-content 用来设置多行的 flex 容器的排列形式

flex-start：各行向侧轴的起始地位重叠。flex-end：各行向弹性盒容器的完结地位重叠。center：各行向弹性盒容器的两头地位重叠。space-around：各行在侧轴中均匀散布。space-between：第一行贴上边，最初一个行贴下边, 其余行在弹性盒容器中均匀散布。stretch：拉伸，不设置高度的状况下。