nodejs40 (UI相关) : CSS flex模型容器 justify-content(主轴排列)&align-items(交叉轴排列)&子元素flex赋值_display: flex; justify-content: space-between; ali-优快云博客

主元素配置：一个两元素的例子

效果如下：

在这里插入图片描述

html

    <header className="header">
      <div className="search-wrapper">
      </div>
      
      <nav className="nav">
      </nav>
  </header>

CSS代码及属性解释

.header {
  display: flex;                /* 启用 flexbox 布局 */
  justify-content: space-between; /* 将元素分布在两端 */
  align-items: center;           /* 垂直居中对齐 */
  padding: 10px 20px;            /* 内边距（元素的内部间距），上下10px，左右20px */
  background-color: #f8f8f8;     /* 背景颜色 */
}

.search-wrapper {
  flex: 0 1 auto;                /* 自适应宽度，元素不会拉伸 */
}

.nav {
  flex: 0 1 auto;                /* 自适应宽度，元素不会拉伸 */
}

display: flex

让 .header 元素成为一个 flex 容器。当一个容器应用了 display: flex;，其所有直接子元素都会变成 flex 项目，这些子元素会按 flexbox 的规则进行排列。

justify-content: space-between

主轴对齐属性。
space-between 将子元素（子项目）均匀分布在容器中，首个和末尾的元素会对齐到容器的两端，而其他元素会均匀地分布在它们之间。
三个元素的例

在这里插入图片描述

如果容器宽度为 1000px，justify-content: space-between; 会确保：
- 第一个子元素贴近容器的左边，
- 最后一个子元素贴近容器的右边，
- 中间的子元素会根据可用空间均匀分布。
更多示例可见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content

align-items: center

交叉轴对齐 的属性。flexbox 的交叉轴通常是垂直方向（从上到下），除非你改变了主轴方向。
center 会将所有子元素在交叉轴（垂直方向）上居中对齐。
这意味着无论子元素的高度是多少，都会确保它们垂直居中于容器内。
所以，align-items: center; 保证了 .header 内的所有子元素（.container, .search-wrapper, .nav）会在垂直方向上居中。
更多示例可见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items

子元素flex赋值

flex值包含了三个部分：`flex-grow flex-shrink flex-basis`

当使用 flex-basis 时，它首先为每个子元素设置一个基础尺寸。这个尺寸确定了子元素在没有考虑 flex-grow 或 flex-shrink 的情况下，应该占用的空间。
如果父容器中有额外的空余空间，flex-grow 会控制如何在子元素之间分配这个空间。
同样，如果子元素的总尺寸超过父容器的空间，flex-shrink 会决定如何缩小这些元素。
flex-grow: 1; 子元素占据容器剩余空间的份额
- 剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。
- 具体来说，flex-grow 控制元素的扩展能力。如果有多个元素的 flex-grow 都为 1，容器剩余空间将会被这多个元素平分。
- 例如：如果容器有 100px 的剩余空间，且两个子元素都设置了 flex-grow: 1;，那么它们会各自占用 50px 的空间。
flex-shrink: 1; 子元素收缩值
- 当容器空间不足时，子元素可以缩小。flex-shrink 默认值是 1，表示元素会缩小以适应容器大小。如果为 0，则该元素不会缩小。
flex-basis: 0; 基础尺寸 flex-basis: length | auto;
flex-basis 定义了元素在分配空间之前的初始大小。0 表示该元素的初始宽度是 0，意味着它会根据剩余空间进行扩展。
- <length>：指定项目的基础尺寸，可以是任何有效的长度单位，例如 px、em、rem、%、vw 等。如果设置了 flex-basis 为其他值（如 20px），它会在此基础上进行扩展。
- auto：默认值，项目的初始大小将基于其内容或设置的宽度/高度（具体取决于主轴方向）。

示例 1：

.container {
  display: flex;
}

.item {
  flex-basis: 200px;  /* 每个子项的基础大小为 200px */
}

.container {
  display: flex;
}

.item {
  flex-basis: 50%;  /* 每个子项的基础大小为容器的 50% */
}

示例 2： `flex: 0 1 auto;`

html

<div class="container">
  <div class="item flex1">Item 1</div>
  <div class="item flexAuto">Item 2</div>
  <div class="item flexAuto">Item 3</div>
</div>

CSS：

.container {
  display: flex;
}

.flex1 {
  flex: 1; /* 自动扩展以填充剩余空间 */
}

.flexAuto {
  flex: 0 1 auto; /* 根据内容自动确定宽度，且可缩小 */
}

flex-grow: 0;
这表示该元素不会向容器中扩展或占据多余的空间。即使容器有空余空间，元素的宽度也不会因为 flex-grow: 0; 而增加。
flex-shrink: 1;
这表示该元素可以缩小，来适应容器的大小。如果容器的空间不足，子元素会根据比例进行缩小，直到它适应容器。
flex-basis: auto;
flex-basis 决定了元素的初始大小。auto 表示元素会根据其内容的大小来确定初始宽度或高度（取决于主轴方向）。也就是说，元素的宽度会根据内容的实际大小来决定，而不是固定值或剩余空间。