弹性盒子内容体居右对其_弹性盒

长久以来，唯一可用的且有稳定的跨浏览器兼容性的能用来构建 CSS 布局的工具只有 floats 和 positioning。它们是既可行，表现也不错的布局方案，但是在某些布局方面它们就有限制，并且难以实现。弹性盒子使得很多布局任务变得更加容易。

首先，我们需要选择将哪些元素将设置为柔性的盒子。我们需要给这些 flexible 元素的父元素 display 设置一个特定值。

section {

 display: flex;

} 

就这样一个简单的声明就给了我们所需要的一切。 我们的多列布局具有大小相等的列，并且列的高度都是一样。 这是因为这样的 flex 项（flex容器的子项）的默认值是可以解决这些的常见问题的。

假如你想设置行内元素为 flexible box，也可以置 display 属性的值为 inline-flex。

flex模型说明

1. 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
2. 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
3. 设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container）。
4. 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是 <article> 元素。

列与行排列

弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排

按列排列：

flex-direction: