CSS3 弹性盒子(Flex Box)

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

1 什么是 Flexbox

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 布局将成为未来布局的首选方案。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

>>> 了解两个基本概念，接下来会频繁提到：

① 容器： 需要添加弹性布局的父元素；

② 项目： 弹性布局容器中的每一个子元素，称为项目；

>>> 了解两个基本方向，这个牵扯到弹性布局的使用：

① 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；默认水平方向为主轴

② 交叉轴： 与主轴垂直的另一方向，称为交叉轴。

.box{
    display: flex; } 

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

使用flex布局，无需绝对定位等改变布局的操作，可以轻松实现元素的水平垂直居中。

css核心代码：

#container{
   
    display:flex;
    justify-content:center;
    align-items:center;
}

2 基本概念

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

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

弹性盒子由弹性容器(Flex container) 和弹性子元素(Flex item) 组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

/*弹性盒子CSS样式*/
<style> 
.flex-container {
     
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
     
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
<!--html文档结构-->
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

3 display

弹性容器通过设置 display 属性的值为 flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

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

<style>
    .flex-container {
   
        display: -webkit-flex;
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
    }

    .flex-item {
   
        background-color: skyblue;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
</style>

4 容器属性

以下5个属性设置在容器上。

• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

1. flex-direction属性
   flex-direction属性决定主轴的方向（即项目的排列方向）：

.box {
    flex-direction: column-reverse; | column | row(默认) | row-reverse |  } 

它有4个可选值。

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点