小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
之前已经介绍过了 grid 系统布局，介绍略显粗略，不过随后会更新内容，今天会介绍一个先于 grid 系统一个布局系统——flex 布局，flex 相对于 grid 系统出现已经有一段时间，兼容性相对要好一些。
其实现在我们在开发一个 web 应用会有 3 套布局供你选择
- 传统布局
- flex 布局
- grid 布局
其中当然传统布局相对于后两种布局系统有着其兼容性好的特点，但是布局比较繁琐，对于 CSS 的新手难于驾驭，而且具有一定局限性，因为设计之初还没有移动设备所以在移动设备上表现一般。
那么再看 flex 布局，操作方便，容易上手，不过 IE 11 或者更低版本，不支持或者部分分支，而且需要理解一下这是一维布局，也就是轴向布局，一个主轴有一个侧轴。
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
flex 布局有许多属性，有的属性属于父级属性，作用父级元素，有些属性则属于子级元素。所以这里创建了 container 父级元素 div 包裹 3 个子级元素 div。
.container{
width: 600px;
height: 480px;
background-color: antiquewhite;
border: 2px solid darkgray;
}
.box{
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
color: white;
font-weight: 600;
font-size: 1.75em;
}
.box:nth-child(1){
background-color:cadetblue;
}
.box:nth-child(2){
background-color:darkslateblue;
}
.box:nth-child(3){
background-color:chocolate;
}
上面我们为了演示给 container 和 box 添加一些样式，
接下来只要在父级元素添加 display:flex; 即可。
.container{
width: 600px;
height: 480px;
background-color: antiquewhite;
border: 2px solid darkgray;
display: flex;
}
flex 布局基本思想，flex 用于为盒子模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我父盒子元素设置了 display:flex 子元素的 float、clear 和 vertical-align 属性将失效。也就是给父级添加属性来控制子元素的排列方式。
- 设置了
display:flex;为 Flex 容器， - 容器的所有子元素为 Flex 项目
父级元素的属性
| 属性名 | 说明 |
|---|---|
| flex-direction | 设置主轴的方向 |
| justify-content | 设置主轴上的子元素排列方式 |
| flex-wrap | 设置子元素是否换行 |
| align-conten | 设置侧轴上的元素的排列方式(多行) |
| align-item | 设置子元素在侧轴上的排列方式(单行) |
| flex-flow | 复合属性，相当于同时设置了 flex-direction 和 flex-wrap |
flex-direction
在 flex 布局中，是分为主轴和侧轴两个方向，他们之间是垂直的关系，默认情况下水平轴为主轴，也就是 row 而竖直方向为侧轴，如果将flex-direction 设置为 column 这将
flex-direction: column;
