弹性盒布局是一种只需要依赖于CSS的样式就可以轻松实现响应式布局

zhushican 1年前 (2022-12-28) 六六互联 974 0

弹性盒布局(display:flex)

弹性盒布局是一种只需要依赖于CSS的样式就可以轻松实现响应式布局

弹性盒布局(Flexible Box)是一种十分方便的,只需要依赖于CSS的样式就可以轻松实现响应式布局弹性布局 flex 是CSS中 display 的一个属性值,通过在父容器上添加 display:flex;属性,便可以实现其子元素在父元素中的弹性布局,但要注意的是 display:flex; 这一条样式只会作用在添加这一属性的父容器和非隔代子容器上,换句话说,父容器上的 diaplay:flex; 属性并不会使其直系子元素中的子元素产生弹性布局。                           


通俗来讲,爹只能管得到自己的儿子、而管不到自己的孙子。如果想要在下一层中继续使用弹性布局,我们可以在相应的子元素上再次添加 display:flex; 属性来实现。弹性布局就像是在一个大盒子里摆放的几个小盒子,各自相对独立,其弹性盒结构如图6-39所示。 从上图可以看出,弹性盒由容器,子元素和轴构成,并且默认情况下,子元素的排布方向与横轴的方向是一致的。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于只要开发人员声明布局应该具有的行为,而不需要给出具体的实现方式。浏览器就会负责完成实际的布局。该种方式的布局模型几乎在主流浏览器中都得到来支持。


相关推荐