Flex 是 Flexible Box 的缩写，也可以叫"弹性布局" "伸缩盒布局"，用来为盒状模型提供最大的灵活性。
比起用margin padding position 来说 用 flex 能够更好的减少代码冗余
移动端通常用flex来布局。
任何一个容器都可以指定为 Flex 布局。
flex布局属性
容器属性
flex-flow
flex-direction
flex-wrap
justify-content
align-items
align-content
元素属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目，简称"项目"。
例如
<!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>Document</title>
<style>
.father{
display: flex;
}
.son1,.son2,.son3{
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div class="father">
<div class="son1" style="background-color: brown;">1</div>
<div class="son2" style="background-color: red;">2</div>
<div class="son3" style="background-color: yellow;">3</div>
</div>
</body>
</html>div father 声明了display：flex，所以father就叫flex 容器。 里面的子元素 son1，son2，son3就是容器成员，称作项目。
对于某一个元素声明了display:flex 。这个元素就成为了弹性容器，具有flex弹性布局的特性 。
当然通常情况下都是用div来声明。后面的例子都用div来举例。
当一个div声明了display:flex那么这个元素就成为了弹性容器，具有flex弹性布局的特性。
1.每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。
注意：水平的轴并不一定就是主轴。它是可以更改的。
主轴的作用就是将你所写的布局 水平方向显示出来。
交叉轴简而言之则相反 从垂直方向下显示出来 。
类似我们学过的X-Y轴一样。
2. 每根轴都有起点和终点，这对于元素的对齐非常重要。
3. flex容器里面的所有子元素都是沿着主轴进行排列的。里面子元素也成为弹性元素
4. 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
弹性容器的两根轴非常重要，所有属性都是作用于轴的。
flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局。
也就是说，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。
我们可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了，那么：
-
交叉轴就会相应地旋转90度。
-
弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。
现在 说说每个属性的作用
最低0.47元/天 解锁文章
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
