Flexbox 的弹性容器与弹性子元素

# 1. 简介 ## 1.1 什么是Flexbox？ Flexbox是一种用于页面布局的新型工具，它可以让我们更加便捷地创建灵活的布局结构。Flexbox布局的出现填补了传统布局方案在处理复杂布局时的不足，为开发者提供了更多的布局控制能力。 ## 1.2 Flexbox的特点 Flexbox具有以下特点： - 灵活性：通过flex容器和flex子元素的属性设置，可以轻松实现多种布局效果。 - 自适应性：灵活地适应不同屏幕尺寸和设备。 - 简洁性：相比传统布局方式，Flexbox可以用更少的代码实现复杂的布局效果。 ## 1.3 弹性容器与弹性子元素的概念 Flexbox布局中，容器成为"flex container"，而内部的每个子元素称为"flex item"。弹性容器可以通过一系列属性的设置控制其内部子元素的布局方式，包括子元素的排列、对齐和分布等。 ## 第二章弹性容器的属性 Flexbox布局的核心是弹性容器和弹性子元素。在这一章节中，我们将介绍弹性容器的属性，这些属性可以帮助我们控制和调整容器内子元素的布局方式。 ### 2.1 display属性 Flexbox布局通过设置`display`属性来开启弹性容器。在CSS中，我们可以将元素的`display`属性设置为`flex`来创建一个弹性容器。具体的代码如下所示： ```css .flex-container { display: flex; } ``` ### 2.2 flex-direction属性 `flex-direction`属性用于指定弹性容器中子元素的排列方向。默认值为`row`，即水平方向排列。除了`row`之外，还有`column`、`row-reverse`、`column-reverse`等取值。例如，我们可以将子元素垂直排列： ```css .flex-container { display: flex; flex-direction: column; } ``` ### 2.3 flex-wrap属性 `flex-wrap`属性用于设置弹性容器内的子元素是否换行。默认情况下，子元素会在一行上显示。可以通过设置`flex-wrap`为`wrap`来实现子元素换行。具体代码如下所示： ```css .flex-container { display: flex; flex-wrap: wrap; } ``` ### 2.4 justify-content属性 `justify-content`属性用于设置子元素在弹性容器中的水平对齐方式。默认值为`flex-start`，即子元素靠左对齐。除了`flex-start`之外，还有`flex-end`、`center`、`space-between`、`space-around`等取值。例如，我们可以将子元素水平居中对齐： ```css .flex-container { display: flex; justify-content: center; } ``` ### 2.5 align-content属性 `align-content`属性用于设置多行子元素在弹性容器中的垂直对齐方式。该属性只在有多行子元素的情况下有效。可以通过设置`align-content`为`flex-start`、`flex-end`、`center`、`space-between`、`space-around`等取值来实现不同的对齐方式。 ### 2.6 align-items属性 `align-items`属性用于设置单行子元素在弹性容器中的垂直对齐方式。该属性只在单行子元素的情况下有效。可以通过设置`align-items`为`flex-start`、`flex-end`、`center`、`baseline`、`stretch`等取值来实现不同的对齐方式。 ### 3. 弹性子元素的属性弹性子元素即弹性容器中的每个子元素，在Flexbox布局中也有一些属性可以设置，并且这些属性是针对每个子元素而言的。 #### 3.1 `order`属性 `order`属性用于设置子元素的显示顺序，可以接受一个整数值作为参数，默认值为0。值越小，显示在前面的位置越靠前。 ```css .flex-item { order: 1; } ``` #### 3.2 `flex-grow`属性 `flex-grow`属性用于设置子元素的伸展比例，默认值为0，表示子元素不伸展。如果多个子元素都设置了`flex-grow`属性，并且值大于0，那么它们将按照比例进行伸展。 ```css .flex-item { flex-grow: 2; } ``` #### 3.3 `flex-shrink`属性 `flex-shrink`属性用于设置子元素的收缩