CSS中Flex布局应用实践总结

① 两端对齐

比如 要求ul下的li每行四个，中间间隔但是需要两段对齐，如下图所示：

这是除了基本的flex布局外，还需要用到:nth-of-type伪类来控制每行第一个与第四个的padding。

.hl_list{
		width: 100%;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.ul_list .hl_list li{
		width: 25%;
		padding: 0 10px;
	}
	.ul_list .hl_list li:nth-of-type(4n+1){
		padding-left: 0;
	}
	.ul_list .hl_list li:nth-of-type(4n+4){
		padding-right: 0;
	}

② 单行截取多余的

display: flex;
flex-wrap: nowrap;
overflow-x: hidden;

flex-wrap: nowrap;规定item不换行。
overflow-x: hidden;规定X轴的超出隐藏

③ 子元素宽度不变

父元素设置flex布局，需要保证某个子元素宽度不变，可以为子元素设置属性如下：

flex-shrink: 0

子元素不设置 flex-shrink: 0 时子元素会随父元素宽度自动等分总宽度，子元素设置的宽度会自动失效

④ 两端对齐且间距一样且子元素宽度一样

要让一个 div 的四个子元素两端对齐，左右不留间距，且中间元素的间距一样，可以使用 CSS 的 Flexbox 布局。Flexbox 提供了一种简单而强大的方法来实现这种布局需求。

示例代码

HTML

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

CSS

.container {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素两端对齐，中间间距相等 */
    width: 100%; /* 容器宽度，可以根据需要调整 */
}

.item {
    flex-basis: 24%; /* 每个子元素占容器宽度的24%，留出1%的空间作为间隔 */
    box-sizing: border-box; /* 确保内边距和边框不会影响宽度计算 */
}

解释

1. display: flex; ：将 .container 设置为 Flexbox 布局。
2. justify-content: space-between;：使子元素在主轴上两端对齐，中间的间距相等。
3. width: 100%; ：设置 .container 的宽度为100%，确保它占据整个可用空间。
4. flex-basis: 24%;：每个子元素的初始宽度设置为容器宽度的24%，这样可以确保四个子元素加上中间的间隔总和为100%。
5. box-sizing: border-box;：确保内边距和边框不会影响子元素的宽度计算。

注意事项

• flex-basis: 24%; 是一个经验值，确保四个子元素加上中间的间隔总和为100%。如果你需要更精确的控制，可以调整这个值。
• 如果你希望子元素之间有固定的间距，可以使用 gap 属性，但这会使得子元素的宽度不再是固定比例。

使用 gap 属性（可选）

如果你希望子元素之间有固定的间距，可以使用 gap 属性，但需要注意调整子元素的宽度以适应总宽度。

CSS

.container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px; /* 子元素之间的固定间距 */
}

.item {
    flex: 1; /* 子元素等分剩余空间 */
    max-width: calc(25% - 10px); /* 调整子元素的最大宽度，确保总和为100% */
    box-sizing: border-box;
}

解释

1. gap: 10px;：设置子元素之间的固定间距为10像素。
2. flex: 1;：使每个子元素等分剩余空间。
3. max-width: calc(25% - 10px);：调整子元素的最大宽度，确保四个子元素加上中间的间隔总和为100%。

通过这些方法，你可以轻松地实现一个 div 的四个子元素两端对齐，左右不留间距，且中间元素的间距一样的布局。

⑤ 在④前提下增大间距

要在上述前提下增大子元素之间的间距，可以调整 flex-basis 的值或者使用 gap 属性。以下是两种方法的详细说明：

方法一：调整 flex-basis 的值

通过调整 flex-basis 的值，可以间接增大子元素之间的间距。例如，将 flex-basis 设置为22%，这样每个子元素的宽度会稍小一些，从而增加中间的间距。

HTML

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

CSS

.container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.item {
    flex-basis: 22%; /* 调整子元素的宽度，减小每个子元素的宽度以增加间距 */
    box-sizing: border-box;
}

方法二：使用 gap 属性

使用 gap 属性可以直接设置子元素之间的间距。这种方法更直观，更容易控制间距的大小。

HTML

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

CSS

.container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20px; /* 设置子元素之间的间距为20像素 */
}

.item {
    flex: 1; /* 子元素等分剩余空间 */
    max-width: calc(25% - 20px / 3); /* 调整子元素的最大宽度，确保总和为100% */
    box-sizing: border-box;
}

解释

1. gap: 20px;：设置子元素之间的间距为20像素。
2. flex: 1;：使每个子元素等分剩余空间。
3. max-width: calc(25% - 20px / 3); ：调整子元素的最大宽度，确保四个子元素加上中间的间隔总和为100%。这里 20px / 3 是因为有三个间隔，每个间隔为20像素。

注意事项

• calc(25% - 20px / 3)：这个计算确保了子元素的宽度加上间隔的总和为100%。具体来说，每个子元素占用25%的宽度，减去每个间隔的平均值。
• box-sizing: border-box;：确保内边距和边框不会影响子元素的宽度计算。

通过这两种方法，你可以灵活地调整子元素之间的间距，以满足你的布局需求。