以下是关于flex(弹性布局)教程之常用布局的详细攻略。

弹性盒子

Flex 布局是 CSS3 新增的一种弹性布局模式，用于在不同屏幕尺寸下布局和对齐元素。

Flex 布局可以给盒子提供弹性特性，让盒子之间的元素能够随内容的增加而自动扩展、随屏幕尺寸的变化而自动适应，同时方便地设置各子元素的对齐、顺序和缩放比例。

通过使用Flex布局，我们可以非常方便地实现常用布局，如水平居中、垂直居中、底部固定、两端对齐等布局要求效果。

容器属性

在使用 Flex 布局时，我们通常会用到以下三个容器属性：

1. display

通过设置"display:flex"来启用 Flex 布局，它会自动把容器的所有子节点转换成为 flex 元素，成为弹性子元素。

.container {  display: flex;}

2. flex-direction

Flex 容器默认的主轴方向是水平方向（即"row"），主轴的方向决定了子元素的排列方向。

.container {  display: flex;  flex-direction: row | row-reverse | column | column-reverse;}

3. justify-content

设置子元素在主轴上的对齐方式。

.container {  display: flex;  justify-content: flex-start | flex-end | center | space-between | space-around;}

项目属性

在使用 Flex 布局时，我们通常会用到以下三个项目属性：

1. order

子元素的排列顺序。

.item {  order: <number>;}

2. flex-grow

子元素扩展比例。

.item {  flex-grow: <number>;}

3. flex-shrink

子元素收缩比例。

.item {  flex-shrink: <number>;}

示例说明

以下是两个实际运用 Flex 布局的示例：

示例1：水平居中

在一个固定宽度的容器中，让其中的子元素水平居中对齐。

<p class="container">  <p class="item">item1</p>  <p class="item">item2</p>  <p class="item">item3</p></p>

.container {  display: flex;  justify-content: center;}.item {  width: 100px;  height: 100px;  background-color: red;}

示例2：两端对齐

在一个固定宽度的容器中，让其中的子元素两端对齐。

<p class="container">  <p class="item">item1</p>  <p class="item">item2</p>  <p class="item">item3</p></p>

.container {  display: flex;  justify-content: space-between;}.item {  width: 100px;  height: 100px;  background-color: red;}