flex 布局 筛子3点布局

偶然在网上看到面试题，我记得写过，但是一下子想不起来如何解决，后面还是找了之前写的才想起来方法。

方法其实很简单主要就是通过flex盒子中的  justify-content属性 和子元素的 align-self

justify-content属性中有

1. flex-start：默认值。项目位于容器的开头。
2. flex-end：项目位于容器的末尾。
3. center：项目位于容器的中心。
4. space-between：项目位于容器内，均匀分布。首个项目位于容器的开头，末尾项目位于容器的末尾。
5. space-around：项目位于容器内，均匀分布，两端保留一半的空间。
6. space-evenly：项目位于容器内，均匀分布，包括首尾两端。

使用space-between 让子元素位于容器内，均匀分布。首个子元素位于容器的开头，末尾子元素位于容器的末尾。

align-self下的属性有

1. auto：默认值。继承父元素的 align-items 属性，如果没有父元素，则表现为 stretch。
2. stretch：如果项目未设置高度或设置为 auto，将占据整个交叉轴空间。如果项目设置了固定高度，则会被拉伸以适应交叉轴的尺寸。
3. flex-start：项目位于交叉轴的起始位置。
4. flex-end：项目位于交叉轴的末尾位置。
5. center：项目位于交叉轴的中心位置。
6. baseline：项目的基线与父容器的基线对齐。

给不同位置的子元素添加不同的属性值

css样式

/* 设置容器的样式 */
.flex-container {
    display: flex; /* 使用 flex 布局 */
    width: 500px; /* 设置容器宽度 */
    height: 500px; /* 设置容器高度 */
    background: #06ee89; /* 容器的背景颜色 */
    justify-content: space-between; /* 在主轴上均匀分布项目，并在项目之间留有空白 */
}

/* 设置子元素共同样式 */
.item1,
.item2,
.item3 {
    width: 150px; /* 设置子元素宽度 */
    height: 150px; /* 设置子元素高度 */
    background: #e10909; /* 子元素的背景颜色 */
    border-radius: 50%; /* 通过设置边框半径为 50% 让元素呈现圆形 */
}

/* 设置第一个子元素的样式 */
.item1 {
    align-self: flex-start; /* 将第一个子元素沿着交叉轴的起始位置对齐 */
}

/* 设置第二个子元素的样式 */
.item2 {
    align-self: center; /* 将第二个子元素沿着交叉轴居中对齐 */
}

/* 设置第三个子元素的样式 */
.item3 {
    align-self: flex-end; /* 将第三个子元素沿着交叉轴的末尾对齐 */
}

html

 <div class="flex-container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
 </div>

效果图