Flex布局做出自适应页面(语法和案例)

下面给您详细讲解“Flex布局做出自适应页面(语法和案例)”的完整攻略。

一、什么是Flex布局

Flexbox是Flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。在Flex布局中，父元素称为容器(container)，子元素称为项目(item)。Flex布局制定了容器内各个子元素的排列方式、对齐方式等一系列规则。它可以让容器的子元素空间自适应，在不同屏幕尺寸下适配不同的终端设备。

二、Flex布局语法

Flex布局需要设置的属性有：

1. 容器的属性
2. display
3. flex-direction
4. flex-wrap
5. flex-flow
6. justify-content
7. align-items

8. align-content

9. 项目的属性

10. order
11. flex-grow
12. flex-shrink
13. flex-basis
14. flex
15. justify-self
16. align-self

三、Flex布局案例

案例一：水平居中

实现效果：一个位于屏幕中心的块状元素

HTML代码：

<div class="container">
  <div class="item">Flex布局就是强！</div>
</div>

CSS代码：

.container {
  display: flex; /* 1. 块状元素变行内块状元素 */
  justify-content: center; /* 2. 主轴方向上居中对齐 */
  align-items: center; /* 3. 交叉轴方向上居中对齐 */
  width: 100%; /* 宽度占满整个屏幕 */
  height: 100vh; /* 高度占满整个屏幕 */
}

.item {
  border: 1px solid #000;
  padding: 10px 20px;
}

案例二：响应式布局

实现效果：在不同的屏幕尺寸下，一个宽高均等的正方形元素，水平与垂直居中

HTML代码：

<div class="container">
  <div class="item">Flex布局真好！</div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.item {
  border: 1px solid #000;
  width: 50%;
  max-width: 400px;
  padding-bottom: 50%; /* 高度等于宽度，设为50% */
  margin: auto; /* flex布局实现水平垂直居中。此外还有 text-align:center 和 vertical-align:center */
}

四、总结

以上就是Flex布局做出自适应页面的完整攻略，从语法上讲解Flex布局的实现方式，并通过两个案例演示了如何使用Flex布局。在实际开发中，使用Flex布局可以为页面提供更大的灵活性和自适应能力。