Flex 布局终极指南：提升网页布局体验的利器

前端

2023-10-10 00:19:20

Flex 布局：打造灵活响应的网页设计

Flex 布局的诞生

Flex 布局（Flexible Box Layout）应运而生，旨在解决传统布局方式的诸多限制，提供更灵活、更强大的网页布局工具。它将容器元素和子元素视为弹性盒子（Flexbox），通过设置它们的属性轻松实现复杂布局。

Flex 布局的关键特性

弹性容器： 自动调整大小以适应子元素。
弹性子元素： 根据容器大小自动调整大小，实现响应式布局。
排列方式： 水平或垂直排列子元素，并设置对齐方式。
间距和对齐： 控制子元素之间的间距和对齐方式，打造整洁布局。

Flex 布局语法

display： 启用 Flex 布局，设为 flex 或 inline-flex。
flex-direction： 设置排列方向（row、column）。
flex-wrap： 控制换行行为（nowrap、wrap）。
justify-content： 水平排列方式（flex-start、center）。
align-items： 垂直排列方式（flex-start、center）。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .item {
      flex-basis: 200px;
      margin: 10px;
      padding: 10px;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>