Flexbox简介

Flexbox（Flexible Box）布局是CSS3中引入的一种新的布局模式，用于在容器中分配空间，即使它们的大小未知或是动态变化的。

Flexbox的主要优势在于它提供了更好的方式来布局、对齐和分配容器内项目的空间，即使它们的大小未知或动态变化。

Flexbox属性

Flexbox布局主要涉及两个类型的属性：容器属性和项目属性。

• 容器属性：
  • display: flex; – 将容器设置为Flex容器。
  • flex-direction – 设置主轴的方向（row、row-reverse、column、column-reverse）。
  • flex-wrap – 设置是否换行（nowrap、wrap、wrap-reverse）。
  • justify-content – 设置项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around、space-evenly）。
  • align-items – 设置项目在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）。
• 项目属性：
  • order – 设置项目的排列顺序。
  • flex-grow – 设置项目的放大比例。
  • flex-shrink – 设置项目的缩小比例。
  • flex-basis – 设置在分配多余空间之前，项目的默认大小。
  • align-self – 允许单个项目有与其他项目不同的对齐方式。

案例讲解：Flexbox布局实例

下面是一个简单的Flexbox布局示例：

在这个示例中，我们创建了一个Flex容器（.flex-container），并设置了display: flex;。我们还使用了justify-content: space-between;来在项目之间分配空间，并使用align-items: center;来在交叉轴上居中对齐项目。

每个项目（.flex-item）都被设置了不同的背景颜色，并且使用flex: 1;来让它们根据可用空间进行扩展。