在写网页的过程中,我们一般会遇到定义了一个div,但在其中添加子项目时,不能够以最佳的方式填满整个div,而使div留有空白,那么我们该如何解决这个问题呢?
正如上文所提到,当子项目无法填满整个div时,我们可能想到了调整子项目的margin、float、width、height等属性,但还要根据此div的大小来慢慢试出来,什么时候的大小是最合适的,而这些布局靠一个属性是很难实现,为什么不让这些设置变得更加简便?
Flexbox(伸缩盒)的出现解决了这一切。
首先通过设置div的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被设置为一个块级元素,而设置为 inline-flex 的容器则设置为一个行内元素。flex属性可以用来指定可伸缩长度的部件:扩展比率(flex-grow)、收缩比率(flex-shrink)和伸缩基准值(flex-basis)。默认值为:0 1 auto,auto表示伸缩基准值的计算值是自身的width设置,如果自身没有设置width值,则长度取决于内容。例如:
伸缩容器属性
(1)flex-flow属性
flex-flow属性是flex-direction和flex-wrap的简写形式。
Flex-direction属性值
row(默认值):主轴为水平方向,起点在左端。
row-reverse: 主轴为水平方向,主轴起点和主轴终点交换。起点在右端。
column: 主轴为垂直方向,主轴和侧轴交换。起点在上沿。
column-reverse: 主轴为垂直方向,起点在下沿。
Flex-wrap属性值
nowrap (默认):不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
(2)justify-content属性
定义项目在主轴的对齐方式,与主轴的方向有关。
Justify-content属性值
flex-start:默认值,左对齐。
flex-end:右对齐。
center:居中。
space-between:两端对齐,项目之间间隔相等。
space-around:项目两侧间隔相等。项目之间的间隔比项目与边框的间隔大一倍。
(3)align-items属性
定义项目在交叉轴上如何对齐
align-items属性值
flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
center:伸缩项目的外边距盒在该行的侧轴上居中放置
baseline:项目在第一行文字的基线对齐。
stretch:默认值,未设置高度或设为:auto,则占满整个盒子。
(4)align-content属性
定义多根轴的对齐方式
flex-start:各行向伸缩容器的起点位置堆叠。
flex-end:各行向伸缩容器的结束位置堆叠。
center:各行向伸缩容器的中间位置堆叠。
space-between:各行在伸缩容器中平均分布。
space-around:各行在伸缩容器中品均分布,在两边各有一半空间。
stretch:默认值,各行将会伸展以占用额外空间。
本文介绍了伸缩盒子的使用,可用伸缩盒子进行布局,但伸缩盒子只是布局中的一个小项目,布局还有很多的方法,如浮动等等,还可参照其他博客,了解更多关于布局的知识。
联系客服