弹性盒模型 - 弹性盒模型之flex属性，初识HTML(5)+CSS(3)-升级版教程-慕课网

14-1 弹性盒模型 - 弹性盒模型之flex属性

本节编程练习不计算学习进度，请电脑登录imooc.com操作

弹性盒模型 - 弹性盒模型之flex属性

这一章节我们来学习flex弹性盒子模型，根据下面的例子来理解一下吧：

实现上图效果,我们需要输入以下代码:

上面的代码：

三个块元素设置大小以及背景色，在父容器中添加flex。

技术点的解释：

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

任务

可以测试右侧编辑器中的代码，感受一下flex布局。

index.html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style type="text/css">
    .box {
        background: blue;
        display: flex;
    }
 
    .box div {
        width: 200px;
        height: 200px;
    }
 
    .box1 {
        background: red;
    }
 
    .box2 {
        background: orange;
    }
 
    .box3 {
        background: green;
    }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
 
</html>