自学内容网 自学内容网
自学内容网 > 正文

CSS中Flex布局应用实践总结

🕗 发布于 2024-11-22 16:47 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;：确保内边距和边框不会影响子元素的宽度计算。

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


原文地址：https://blog.csdn.net/J080624/article/details/143941710

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024