flex(弹性布局)教程之常用布局

以下是关于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：水平居中

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

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

.container {
  display: flex;
  justify-content: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

示例2：两端对齐

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

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

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

以上就是关于 flex(弹性布局)教程之常用布局的完整攻略。