什么是弹性（Flex）布局 ？15分钟弄懂Flex布局

在网页布局的学习中，我们经常会遇到弹性（Flex）布局，那么弹性（Flex）布局究竟是什么样子的呢？相信你学完了本篇文章就会明白Flex（弹性）布局的真正的意思了。

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

什么是Flexbox ？

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

• 1、在不同方向排列元素
• 2、重新排列元素的显示顺序
• 3、更改元素的对齐方式
• 4、动态地将元素装入容器

什么情况下不建议使用 Flexbox ？

虽然 Flexbox 非常适合缩放，对齐和重新排序元素，但以下情况应该尽量避免使用 Flexbox 布局：

• 1、整体页面布局
• 2、完全支持旧浏览器的网站

浏览器支持 Flexbox 的情况：

旧版浏览器，如IE 11或更低版本，不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现，你应该退回到其他的 CSS 布局方式，比如结合float 的 display: inline-block 或者 display: table 等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得一试。

术语

在 Flexbox 模型中，有三个核心概念：
– flex 项（愚人码头注：也称 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 项
– 排列方向（direction），这决定了 flex 项的布局方向（注：更多的文章叫主轴）

最好的学习方式是从经验和例子中学习，所以让我们开始吧！

Level 1 — 基础

1）创建一个 flex 容器

CSS 代码:

.flex-container {display: flex;}

代码如下：
HTML：

<div class="flex-container">  
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div> 

CSS：

.flex-container {
 display: flex;
}
/* 以下为辅助样式 */
.flex-container{ 
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

要创建一个 flex 容器，您只需要将一个 display: flex 属性添加到一个元素上。默认情况下，所有的直接子元素都被认为是 flex 项，并从左到右依次排列在一行中。如果 flex 项的宽度总和大于容器，那么 flex 项将按比例缩小，直到它们适应 flex 容器宽度。

2）将 flex 项排成一列

CSS 代码:

.flex-container {display: flex;flex-direction: column;}

代码如下：

HTML：

<div class="flex-container">  
<div class="