揭秘CSS(第 1 版)
9.3.2 建立弹性盒布局
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

基本布局类型

多列布局

弹性布局盒模型

弹性布局盒模型

建立弹性盒布局

弹性盒布局模型中引入了一些新的属性,只要设置好相应属性,盒子就具有弹性,在改变浏览器窗口大小时,盒子大小也会自动发生变化。并且,盒子的大小由浏览器自动计算,使页面布局更加灵活、更加简单,可以很轻松创建自适应浏览器窗口的流式布局。

如,在class = "father" 的父元素中,包含class = "box1"、class = "box2"、class = "box3"三个子元素。HTML代码如下(除非特殊声明,后文都将使用该实例):

<div class = "father">
    <div class = "box1">1</div>
    <div class = "box2">2</div>
    <div class = "box3">3</div>
</div>

要使用弹性布局盒模型,实现弹性布局的效果,只需要两步:第一步,开启弹性盒模型;第二步,设置子元素的空间分配比例。

开启弹性盒模型

是否开启弹性盒模型,由父元素(即弹性容器,下同)决定。要开启弹性盒模型,只需把父元素的 display 的属性值为 flex 或 inline-flex 即可。如:      

.father  {
     width: 600px;
     display: flex;
}

取值为 flex 时,弹性容器被渲染为块级元素,取值为 inline-flex时,弹性容器被渲染为行内元素。如果把一个浮动或绝对定位元素的 display 属性值设置为 inline-flex,则 display 属性的计算值是 flex。

设置子元素的空间分配比例

开启弹性布局盒模型后,所有弹性子元素共享父元素的空间,并按弹性盒进行布局。然后,通过子元素的 flex-grow 属性设置各自的空间分配比例。设置分配比例后,所有子元素根据各自所占用的份额来分配父元素的空间。如:

.box1 {
    flex-grow: 2;       
    background: #7f3ffd;
}
.box2 {
    flex-grow: 1;
    background: #ef39d5;
}
.box3 {
    flex-grow: 1;
    background: #1bb9f1;
}

上述代码中,box1、box2、box3的 flex-grow 属性值分别是2、1、1,它们把父元素的空间分成了2 + 1 + 1 = 4份。其中,box1占2/4,box2占1/4,box3占1/4。父元素的总宽度是600px,box1分得600×(2/4) = 300px,box2分得600×(1/4) = 150px,box3分得600×(1/4) = 150px。运行结果如图 9‑12 所示:

display:flex效果
图9-12 display:flex效果

如果父元素 father 为非固定宽度,则在浏览器窗口大小发生变化时,各个子元素的宽度就会随着按比例发生变化,便体现出弹性布局的优势。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验