CSS & 实现让最后一排元素向左对齐并且整体要居中的几种方式

最新推荐文章于 2024-07-26 14:27:06 发布

cookcyq

最新推荐文章于 2024-07-26 14:27:06 发布

阅读量1.2k

点赞数 2

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/cookcyq__/article/details/132382129

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章讲述了在项目中遇到的CSS列表最后一排元素向左对齐的需求，探讨了flex和grid布局的不同解决方案，包括手动计算宽度、使用grid-template-columns和灵活运用justify-content。作者还强调了响应式设计的重要性。

摘要由CSDN通过智能技术生成

背景

好久没写 CSS 了，最近产品提了个样式需求，让列表最后一排的元素要向左对齐，而不是居中分配，如图：
在这里插入图片描述

由于项目采用 flex 布局，一开始想到的是直接给容器加个 justify-content: flex-start
在这里插入图片描述

看起来确实满足了需求，但仔细观察你会发现，整体不居中了：
在这里插入图片描述

接下来我将会以不同的方式来解决上述问题。

方式1：手算容器宽度

以下所指的”组件“ = ”子元素“，”容器“ = ”父元素“。

整体不居中的其实是”容器宽度“与每排组件的宽度总和没有形成等量关系导致的，我们可以给容器设定 justify-content: center 或 space-between 来完成，但带来的问题就是上述所说的，最后一排组件不会向左居中。

这里借鉴了某东的布局方案，从效果上看，确实解决了最后一排组件向左且整体居中的问题，原理也很简单，就是父容器定宽，组件动态计算铺满来形成等量关系，如图：
在这里插入图片描述

每个组件的宽度计算方式是： (990 / 4) - 10 = 237.5（减 10 是要留给外边距），这样每排总宽度就等同于容器宽度： 237.5*4 + 10*3 = 990 形成等量关系，其中 10*3 表示每排组件前 3 个设定外边距，最后 1 个不加：
在这里插入图片描述

知道原理后实现也蛮简单的，案例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      margin: 0; padding: 0;
    }
    * {
      box-sizing: border-box;
    }
    .container{
      display: flex;
      flex-wrap: wrap;
      width: 990px;
      margin: 0 auto;
      outline: 1px solid;
    }
    .component {
      width: 240px;
      height: 240px;
      background-color: orange;
      margin-right: 10px;
      margin-top: 10px;
    }
    .component:nth-child(4n) {
      margin-right: 0;
    }
    
  </style>
</head>
<body>
  <div class="container">
    <div class="component">1</div>
    <div class="component">2</div>
    <div class="component">3</div>
    <div class="component">4</div>
    <div class="component">5</div>
    <div class="component">6</div>
  </div>
</body>
</html>

如果希望宽高度能够响应式，换个单位即可，比如 vh/vw 或 rem 等。

效果：
在这里插入图片描述

然而这种方案的缺陷是，若产品要求每排组件数量从 4个改为 8 个时，我们又得重新计算。

没事，咋们继续往下看方式2如何解决。

方式2：使用 Flex + Grid 布局

这种方式的思路是：父容器用 flex 布局让整体居中，子容器用 grid 布局提供的 grid-tempelate-columns 定列宽，案例代码如下：

关于 grid 布局的更多用法可参考文档，这里我们只要了解 grid-tempelate-columns（设定列宽）、 gap（每个组件的外边距）即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      margin: 0; padding: 0;
    }
    * {
      box-sizing: border-box;
    }
    .super-box{
      display: flex;
      justify-content: center;
    }
    .container {
      display: grid;
      grid-template-columns: repeat(4, 200px);
      gap: 10px;
      outline: 1px solid;
    }
    .component {
      background-color: orange;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="super-box">
    <div class="container">
      <div class="component">1</div>
      <div class="component">2</div>
      <div class="component">3</div>
      <div class="component">4</div>
      <div class="component">5</div>
      <div class="component">6</div>
      <div class="component">7</div>
      <div class="component">8</div>
      <div class="component">9</div>
      <div class="component">10</div>
    </div>
  </div>
</body>
</html>

效果：
在这里插入图片描述

如果想调整 column 列数，只需改动 grid-template-columns: repeat(8, 200px); 这行，解决了方式1需要人工计算的问题：
在这里插入图片描述

实际上我们还可以继续优化，往下看👇

方式3：使用 Grid 布局

方式2的原理是让父容器lex 的 justify-content: center 整体达到居中。

这里有个误区要注意，justify-content 不仅仅用于 flex，还可用于 grid，于是我们只需将 justify-content 挪到子容器里，父容器则完全可剔除掉，改造如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      margin: 0; padding: 0;
    }
    * {
      box-sizing: border-box;
    }
    .container {
      display: grid;
      grid-template-columns: repeat(4, 200px);
      gap: 10px;
      justify-content: center;
    }
    .component {
      background-color: orange;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="component">1</div>
    <div class="component">2</div>
    <div class="component">3</div>
    <div class="component">4</div>
    <div class="component">5</div>
    <div class="component">6</div>
    <div class="component">7</div>
    <div class="component">8</div>
    <div class="component">9</div>
    <div class="component">10</div>
  </div>
</body>
</html>