display: flex;什么功能

`display: flex;` 是 CSS 布局模型中的一种弹性盒（Flexbox）布局方式，它为 web 开发者提供了一种灵活的方式来组织和对齐容器内的项目（元素）。使用 `display: flex;` 后，容器会变为弹性容器，其内容项（children）会根据容器的设置进行动态调整，以适应不同的屏幕尺寸、窗口大小或者滚动条的出现。

主要功能包括：

1. **流体布局**：子元素会沿着主轴（默认是水平方向）排列，可以轻松实现响应式布局，使内容自适应容器大小。

2. **对齐和分布**：通过 `justify-content`、`align-items` 和 `align-self` 属性，开发者可以控制项目在容器内的水平和垂直对齐方式，如居中、两端对齐等。

3. **伸缩（flex-grow, flex-shrink, flex-basis）**：允许子元素根据剩余空间或限制大小进行伸缩，便于自适应空间。

4. **换行和包裹**：`flex-wrap` 控制项目是否换行，`flex-wrap: wrap` 可以让元素在一行放不下时换到下一行。

5. **主轴和交叉轴**：`flex-direction` 设置主轴的方向，`flex-direction: row` 为水平布局，`flex-direction: column` 为垂直布局；`flex-wrap` 则是围绕交叉轴的换行。

相关问题

display:flex

`display: flex` 是 CSS 中的一个属性，它用于定义一个元素的布局方式为弹性布局（Flexbox）。通过 `flex` 属性，我们可以轻松地实现以下功能：

1. 实现等高布局（即子元素的高度相等）；
2. 实现自适应布局（即子元素的宽度自适应）；
3. 实现对齐方式的控制（包括水平对齐和垂直对齐）；
4. 实现子元素的排序。

`display: flex` 需要配合其他的属性来使用，比如 `flex-direction` 用于定义主轴的方向、`justify-content` 用于定义主轴上的对齐方式，`align-items` 用于定义交叉轴上的对齐方式等等。

display:flex 为什么无效

display:flex无效的原因可能是由于以下两个问题导致的：

1. display属性被设置为none：当display属性被设置为none时，元素会被隐藏，同时也会导致flex布局失效。因此，如果想要恢复flex布局，需要将display属性设置为flex或者block。

2. 子元素的flex属性设置不正确：在flex布局中，子元素的flex属性决定了它们在父容器中的分配比例。如果子元素的flex属性设置不正确，可能会导致宽度失效。默认情况下，子元素的flex属性为flex: 0 1 auto，其中1表示开启了元素的收缩功能，可能会导致宽度失效。因此，需要根据实际需求调整子元素的flex属性，以使其正确地分配宽度。

以下是解决display:flex无效的方法：

1. 确保display属性正确设置：将display属性设置为flex或者block，以恢复flex布局的效果。

document.querySelector('header').style.display = 'flex';

2. 调整子元素的flex属性：根据实际需求调整子元素的flex属性，以使其正确地分配宽度。

子元素的选择器 {
  flex: 1; /* 或其他合适的值 */
}