flex布局

flex默认属性

在 CSS 中，flex 是一个用于布局的属性，它使元素能够按照灵活的方式排列。默认情况下，flex 布局的属性有几个关键特性。以下是一些常见的默认属性：

1. display: flex;

   • 使容器成为一个弹性容器，默认情况下，容器的子元素（flex 项目）会被水平排列。

2. flex-direction: row;

   • 这是 flex 布局的默认方向，子元素沿主轴（水平方向）排列。你可以通过修改这个属性来改变主轴的方向（如 column 会使元素垂直排列）。

3. flex-wrap: nowrap;

   • 默认情况下，flex 容器中的项目不会换行。如果容器空间不足，所有元素都会挤在同一行（或列）中。可以通过设置 flex-wrap: wrap; 来启用换行。

4. justify-content: flex-start;

   • 默认情况下，项目沿主轴（水平）对齐到容器的起始位置。可以通过设置不同的值（如 center、space-between 等）来改变对齐方式。

5. align-items: stretch;

   • 默认情况下，项目会在交叉轴（垂直）上拉伸以填满容器，除非设置了具体的高度或宽度。

6. align-self: auto;

   • 每个项目可以有一个独立的对齐方式，auto 表示该项目使用其父容器的默认对齐方式。

7. flex-grow: 0;

   • 项目在可用空间内的增长比例，默认值是 0，这意味着项目不会增长以填满空间。

8. flex-shrink: 1;

   • 项目在空间不足时的收缩比例，默认值是 1，这意味着项目会收缩以适应容器的大小。

9. flex-basis: auto;

   • 项目的初始大小，默认情况下，auto 表示元素的大小由内容决定。

通过调整这些默认属性的值，flex 布局可以实现多种不同的布局效果。

flex布局

Flexbox 布局对行内元素和块级元素都适用。无论是 <span>、<a> 这样的行内元素，还是 <div>、<p> 这样的块级元素，都可以在 Flexbox 容器中进行灵活的排列和对齐。

.pg-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  height: 72px;
}

flex-grow