Flexbox - CSS

Flexbox (Flexible Box Layout) 是一种用于排版元素的 CSS 弹性盒子布局模型。它专注于在不同屏幕尺寸和设备上提供一致的页面布局，并简化了基于浮动和定位的传统布局方式。

通过使用 Flexbox，开发者可以更简单地实现以下特点：

• 可在任何方向上（水平或垂直）进行布局和对齐。
• 支持动态和响应式布局。
• 使开发者能够在不同设备上创建更加灵活的布局。
• 简化了 HTML/CSS 代码的编写，因为不需要为了实现一种布局，针对每个元素编写多个 CSS 规则。

Flexbox 布局容器

一项使用 Flexbox 布局的工作流程中，有一种 "flex container" 元素，可以定义其中的 "flex items" 部分的布局。通过样式 display: flex; 可以将一个 HTML 元素定义为一个 flex container。

.flex-container {
  display: flex;
}

Flexbox 的主轴和交叉轴

Flexbox 布局模型具有一个主轴和一个交叉轴，它们相互垂直。主轴通常是页面排版的最重要方向，而在此方向上进行对齐和扩展的功能也是 Flexbox 最强大的特性之一。

![Flexbox axes diagram](https://cdn.javascripttutorial.net/wp-content/uploads/2020/04/flexbox-axes.png)

Flexbox 主要属性

以下是开发者在使用 Flexbox 布局时最常用的 CSS 属性：

容器属性

• display: flex; 定义一个 flex container。
• flex-direction: row | row-reverse | column | column-reverse; 定义一组 flex items 在 flex container 内应该如何排列。
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; 定义 flex items 在主轴上的对齐方式。
• align-items: stretch | flex-start | flex-end | center | baseline; 定义 flex items 在交叉轴上的对齐方式。
• flex-wrap: nowrap | wrap | wrap-reverse; 定义 flex items 在 flex container 是否应该换行。

Flex Item 属性

• flex-grow: <number>; 定义项目应该增长的比例。
• flex-shrink: <number>; 定义项目应该缩小的比例。
• flex-basis: <length> | auto; 定义项目在分配多余空间之前占据的主轴空间。
• flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; 既定 flex-grow, flex-shrink, 和 flex-basis 属性的缩写。
• align-self: auto | flex-start | flex-end | center | baseline | stretch; 覆盖容器级 align-items 属性。

Flexbox 布局的浏览器支持

Flexbox 已成为现代浏览器的标准特性，并得到了良好支持，但仍需注意旧版浏览器的兼容性，可使用 polyfill 或基于 float 和 position 的传统布局方法来实现兼容。

总结

Flexbox 提供了一个强大的工具，可以让开发者更加简单地实现页面布局和对齐，同时使得页面在不同的设备和屏幕大小上表现出更强的灵活性和响应能力。以 display: flex; 开始，通过理解容器和项目的属性，开发者可以大大提高他们的页面设计和布局的效果。