CSS3之flex布局

Flexbox​ 是 ​flexible box​ 的简称（注：意思是“​灵活的盒子容器​”），是 CSS3 引入的新的布局模式。

它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 ​Flexbox​ ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。

与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，

​Flexbox ​是一个更强大的方式：

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

基本概念

采用 ​Flex​ 布局的元素，称为 ​Flex​ 容器（​flex container​），简称"​容器​"。

它的所有子元素自动成为容器成员，称为 ​Flex​ 项目（​flex item​），简称"​项目​"。

在 ​Flexbox ​模型中，有三个核心概念：
– ​flex ​项（注：也称 ​flex​ 子元素），需要布局的元素
– ​flex ​容器，其包含 ​flex​ 项
– 排列方向（​direction​），这决定了 ​flex ​项的布局​方向​

只要在一个元素的 CSS 中添加display: flex;，

就可以使用其它 flex 属性来构建响应式页面了。

Flex​布局，可以简便、完整、响应式地实现各种页面布局。

目前已得到所有现在浏览器的支持。

例如：

<style>
  #box-container {
    height: 500px;
    display: flex;
  }
  
  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

两个盒子使用CSS3中flex并排。