css中的flex布局

flex布局中的常见属性及其相关含义

1. flex-direction：决定了 flex 容器中 flex 元素的主轴方向。可选值有：row(默认值，水平方向从左到右)、row-reverse(水平方向从右到左)、column(垂直方向从上到下)、column-reverse(垂直方向从下到上)。

2. flex-wrap：决定了 flex 元素是否可以换行。可选值有：nowrap(默认值，不换行)、wrap(允许换行)、wrap-reverse(允许换行，但是反向换行)。

3. justify-content：决定了 flex 元素在主轴上的对齐方式。可选值有：flex-start(默认值，在主轴起点对齐)、flex-end(在主轴末尾对齐)、center(在主轴中心对齐)、space-between(在主轴上平均分布，首尾元素不留间隔)、space-around(在主轴上平均分布，首尾元素留间隔)。

4. align-items：决定了 flex 元素在交叉轴上的对齐方式。可选值有：stretch(默认值，拉伸填满交叉轴)、flex-start(在交叉轴起点对齐)、flex-end(在交叉轴末尾对齐)、center(在交叉轴中心对齐)、baseline(以基线对齐)。

5. align-content：决定了多行 flex 元素在交叉轴上的对齐方式。只有在 flex-wrap 设置为 wrap 或 wrap-reverse 时有效。可选值有：stretch(默认值，拉伸填满交叉轴)、flex-start(在交叉轴起点对齐)、flex-end(在交叉轴末尾对齐)、center(在交叉轴中心对齐)、space-between(平均分布，首尾没有间隔)、space-around(平均分布，首尾留有间隔)。

6. flex-grow：定义了当剩余空间存在时， flex 元素的放￥￥例，默认为 0，即不放大。如果所有 flex 元素的 flex-grow 都为 1，则它们将等分剩余空间。如果一个元素的 flex-grow 为 2，它将获得剩余空间的两倍。

7. flex-shrink：定义了当空间不足时， flex 元素的缩小比例，默认为 1。如果所有 flex 元素的 flex-shrink 都为 1，则它们将等比例缩小。如果一个元素的 flex-shrink 为 2，它将缩小的更多。

8. flex-basis：定义了在分配多余空间或收缩空间之前， flex 元素的初始大小。它可以是一个具体的像素值，也可以是一个百分比。

9. flex：是 flex-grow, flex-shrink, flex-basis三个属性的简写形式。默认值为 0 1 auto。

10. order：决定 flex 元素的排列顺序，数值越小越靠前，默认为 0。

flex布局中align-contentjalign-items有何区别

在Flex布局中，align-content和align-items是用于控制项目在主轴（默认为水平方向）和交叉轴（默认为垂直方向）上的对齐方式的属性。它们的主要区别在于对齐的内容和项目的方式。

• align-items：这个属性用于控制项目在交叉轴上的对齐方式。它有以下几个值：flex-start（项目从左侧开始）、flex-end（项目从右侧开始）、center（项目居中对齐）、baseline（项目的基线对齐）以及stretch（如果项目未设置具体的高度或根据其他属性无法确定高度，则将其拉伸到容器的整个宽度或高度）。
• align-content：这个属性用于控制主轴上的多行项目在行中的对齐方式。它有以下值：flex-start（多行项目从顶部开始）、flex-end（多行项目从底部开始）、center（多行项目在主轴中心对齐）、space-between（多行项目在主轴上均匀分布，首尾项目与主轴边缘对齐）、space-around（多行项目在主轴上均匀分布，首尾项目与相邻项目的距离相等）、space-evenly（多行项目在主轴上均匀分布，并尝试使每个项目占据相等的主轴空间）以及stretch（如果有多行项目，则拉伸容器以填充所有可用空间）。

简单来说，align-items主要用于控制单个项目的垂直居中或等高问题，而align-content则用于控制多行项目的对齐方式，特别是在多行布局中。

使用flex布局实现一个左右侧固定，中间自适应布局

1. 创建一个HTML结构，包含一个容器元素作为flex布局的父容器。

   <div class="container">
     <div class="sidebar">左侧内容</div>
     <div class="main-content">中间内容自适应</div>
     <div class="sidebar">右侧内容</div>
   </div>

2. 在CSS中设置容器元素的display属性为flex，并设置左右侧边栏和中间内容的宽度为固定值。

.container {
  display: flex;
  justify-content: space-between; /* 左右两侧等宽显示 */
}

.sidebar {
  width: 200px; /* 左侧固定宽度 */
}

.main-content {
  flex-grow: 1; /* 中间内容自适应 */
}

在上述代码中，我们使用了flex布局的display: flex属性将容器元素设置为flex布局。justify-content: space-between属性使得左右两侧的内容等宽显示。左侧边栏的宽度设置为200px，中间内容使用flex-grow: 1属性实现自适应宽度。右侧边栏的宽度也设置为200px，可以根据需要进行调整。

不使用flex：

dom

<div class="container">
  <div class="sidebar">
    <!-- 左侧固定内容 -->
  </div>
  <div class="main-content">
    <!-- 中间自适应内容 -->
  </div>
  <div class="sidebar">
    <!-- 右侧固定内容 -->
  </div>
</div>

css

.container {
  overflow: hidden;
}

.sidebar {
  float: left;
  width: 200px; /* 左右侧固定宽度 */
}

.main-content {
  margin-left: 200px; /* 要考虑左侧固定宽度 */
  margin-right: 200px; /* 要考虑右侧固定宽度 */
}

A，B，C，D都占据各自的单元格，但E跨越B和C的位置，占据两个单元格如何更简单的实现上面的布局

HTML

html
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item big">E</div>
  <div class="item">F</div>
</div>

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  grid-auto-rows: minmax(100px, auto); /* 行高自适应，最小高度为100px */
}

.item {
  background-color: lightblue;
  border: 1px solid gray;
  padding: 10px;
}

.big {
  grid-column: span 2; /* 跨越两列 */
}