Flexbox 是一种用于在容器中布局项目的 CSS3 功能，它提供了一个更加高效和灵活的方式来对齐和分配容器内元素的空间，即使它们的大小是未知或动态的。
Flexbox 基础
Flexbox 的布局主要分为两个轴：主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平方向，交叉轴是垂直方向。
属性
- flex-direction: 设置主轴的方向。
- flex-wrap: 设置是否换行。
- flex-flow: 简写属性，用于设置
flex-direction和flex-wrap。 - justify-content: 设置主轴上的对齐方式。
- align-items: 设置交叉轴上的对齐方式。
- align-content: 设置多行之间的对齐方式。
网格布局
CSS Grid 布局是一个二维布局系统，允许你创建复杂的布局结构。
属性
- display: 设置元素为 grid 布局。
- grid-template-columns: 定义列的数量和大小。
- grid-template-rows: 定义行的数量和大小。
- grid-template-areas: 定义网格区域。
- grid-column: 设置元素所在的列。
- grid-row: 设置元素所在的行。
图片示例
Flexbox 布局示例