css弹性盒模型 阮一峰

阮一峰在他的文章中介绍了CSS弹性盒模型（FlexBox），这是一个现代CSS布局技术，可帮助开发人员轻松地实现响应式设计。与传统的基于盒模型的布局不同，弹性盒模型是基于容器内部的布局并且非常灵活。

在FlexBox中，一个容器（即一个DIV）可以被分为几个不同的区域，称为Flex容器。在Flex容器内部，可以包含许多Flex项目，每个Flex项目都有自己的大小和位置。通过在容器上设置一些属性，如display: flex和flex-direction，可以控制Flex容器的方向和排列方式。

.container {
  display: flex;
  flex-direction: row;
}

在上面的例子中，容器被设置为flex模式，并指定了flex-direction为row（水平方向）。这意味着Flex项目将按从左到右的顺序水平排列。

FlexBox的一个优点是，可以轻松地控制Flex项目的大小和位置。通过将flex-grow，flex-shrink和flex-basis属性应用于Flex项目，可以控制它们的大小，而justify-content和align-items属性用于控制它们的位置。

.Box {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100px;
  justify-content: center;
  align-items: center;
}

在上面的例子中，Flex项目将根据设置的flex-grow和flex-shrink属性自动调整大小，但不会小于flex-basis值。而justify-content和align-items属性将控制Flex项目在Flex容器中的位置。

总的来说，FlexBox是一个强大的CSS布局工具，允许开发人员在不同设备和屏幕尺寸上灵活地构建响应式设计。它的弹性和方便的属性设置使其成为现代Web开发不可或缺的一部分。