CSS Layout: Flexbox布局

CSS Layout，也被称为CSS盒模型，是一种用于创建网页布局的方法，它包括了块级元素、内联元素和行内元素，CSS Layout的主要目标是使网页内容在各种设备和屏幕尺寸上都能保持良好的可读性和可用性。

Flexbox布局是CSS Layout的一种重要技术，它可以让我们更灵活地控制元素的排列和对齐方式，Flexbox布局的主要优点是它可以自动调整元素的大小以适应其容器，这使得我们可以更容易地创建响应式设计。

在Flexbox布局中，我们使用一个名为"flex container"的元素来包裹我们的子元素，这个元素需要设置display: flex;属性，这样它的所有直接子元素就会变成flex items。

每个flex item都有一个flex property，它决定了该元素在flex container中的宽度、高度、顺序等，我们可以设置flex-grow属性来决定当flex container的宽度不足以容纳所有flex items时，哪些items会增长。

我们还可以使用justify-content和align-items属性来控制flex items在flex container中的对齐方式，我们可以设置justify-content: center;来让所有的flex items在水平方向上居中对齐。

我们还可以使用flex-wrap属性来控制当flex items不能在一行中显示时，它们是否会换行，我们可以设置flex-wrap: wrap;来让flex items在一行中显示不下时换行。

CSS Layout和Flexbox布局为我们提供了一种强大而灵活的方式来创建复杂的网页布局，通过使用这些技术，我们可以创建出既美观又易于使用的网页设计。