关于前端:学习-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：拉伸，不设置高度的状况下。