乐趣区

关于前端:学习-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:拉伸,不设置高度的状况下。
退出移动版