弹性盒子布局

1.布局介绍

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

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

        在不同方向排列元素

        重新排列元素的显示顺序

        更改元素的对齐方式

        动态的将元素装入容器

2.基本概念

采用Flex布局的元素，称为Flex容器(flex container),简称容器。它的所有子元素自动成为容器成员， 称为Flex项目(flex item),简称“项目”。

        在Flexbox模型中，有三个核心概念：

flex容器：任何一个标签都可以指定为flex布局(display:flex)，其包含flex项

flex项：(也称flex子元素)，需要布局的元素

排列方向(direction)：决定了flex项的布局方向

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

项目默认沿主轴排列。单个项目占据的主轴空间叫做main si