首先给父盒子设置一个orange（橙色）的背景颜色。给父盒子添加三个子盒子，设置宽高各为150像素，设置背景颜色为pink（粉色），再给一个像素的黑色边框；
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
.container{
background:orange;
}
.container div{
width:150px;
height:150px;
background:pink;
border:1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div>1/div>
<div>2/div>
<div>3/div>
</div>
</body>
</html>
效果图：
解析：三个子盒子是块级元素所以每个占一行，如果想要子盒子并列排序在一行可以设置子盒子的display属性，把块级元素转换成行内元素或者行内块级元素都可以，再或者使用float（浮动），设置浮动之后还需要给父盒子清除浮动会相对麻烦一些。
现在给父元素一个flex属性
代码：
.container{
background:orange;
display:flex;
}
效果图：
解析：给父元素的display属性设置flex，就可以三个子盒子并列排列在一起。只用给父盒子设置一行代码就可以很好将子盒子自动排列，相对于浮动来说会比较简单一些。
Flex布局原理：
Flex是flexble Box的缩写，意为“弹性布局”，用来为盒壮模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
解析：无论是块级元素还是行内元素都可以设置flex布局，设置出来的效果都是一样的。
注意：
当我们为父盒子设为flex布局以后，子盒子的float、clear和vertical-align属性将时效；
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局（多中说法意思一样）；
采用flex布局的元素，称为flex容器（flex container）简称“容器”。它所有子元素自动成为容器成员，称之为flex项目（flex item）简称“项目”；
体验中div就是flex父容器；
体验中span就是子容器flex项目；
子容器可以横向排列也可纵向排列；
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
