css（弹性盒子）

核心概念

• 容器与项目：通过 display: flex (块级弹性容器）或display: inline-flex（行内弹性容器）将父元素设为弹性容器，子元素自动成为项目。
• 主轴与交叉轴：默认主轴为水平方向，交叉轴为垂直方向，可通过 flex-direction 调整。

容器的属性

1、flex-direction

定义主轴方向（子元素的排列方向）：

• row：默认值，水平排列（从左到右）。
• row-reverse：水平排列（从右到左）。
• column：垂直排列（从上到下）。
• column-reverse：垂直排列（从下到上）。

2、flex-wrap

定义子元素是否换行：

• nowrap：默认值，不换行。
• wrap：换行。
• wrap-reverse：反向换行。

3、justify-content

定义子元素在主轴上的对齐方式：

• flex-start：默认值，靠左对齐。
• flex-end：靠右对齐。
• center：居中对齐。
• space-between：两端对齐，子元素之间间距相等。
• space-around：子元素周围间距相等。
• space-evenly：子元素之间和周围间距相等。

4、align-items

定义子元素在交叉轴上的对齐方式：

• stretch：默认值，拉伸以填满容器。
• flex-start：靠上对齐。
• flex-end：靠下对齐。
• center：居中对齐。
• baseline：基线对齐。

5、align-content

定义多行子元素在交叉轴上的对齐方式：

• stretch：默认值，拉伸以填满容器。
• flex-start：靠上对齐。
• flex-end：靠下对齐。
• center：居中对齐。
• space-between：两端对齐，行之间间距相等。
• space-around：行周围间距相等。

主轴和交叉轴

• 主轴是子元素的主要排列方向，由 flex-direction 属性决定。
• 交叉轴是与主轴垂直的轴。如果主轴是水平方向，则交叉轴是垂直方向；如果主轴是垂直方向，则交叉轴是水平方向。

子元素的属性

1、flex-grow

定义子元素的放大比例（默认值为0，即不放大）

2、flex-shrink

定义子元素的缩小比例（默认值为1，即允许缩小）

3、flex-basis

定义子元素在分配多余空间之前的基础尺寸（默认值为auto) 注意：flex-grow、flex-shrink 和 flex-basis 的简写：

.item {
  flex: 1 0 100px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 100px */
}

4、align-self

定义单个子元素在交叉轴上的对齐方式（覆盖容器的align-items属性）

5、order

定义子元素的排列顺序（默认值为0，数值越小越靠前）

弹性盒子示例

1、水平居中对齐

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

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px;
  background-color: lightgray;
}
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

2、响应式导航栏

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Contact</li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #333;
  color: white;
}
.menu {
  display: flex;
  list-style: none;
  gap: 20px; /* 菜单项之间的间距 */
}