当列无法容纳在 1 行中时，使列能够水平排列

Question

我有一排有 6 列，当列不能在屏幕上彼此相邻时，其中 2 列放在下面，但看起来有点乱。

我可以用媒体查询来解决这个问题，但我想知道是否有更好的方法来使下面的 2 个放置得更“漂亮”

这张图片可能比我的解释更好

更新（示例代码）

<div class="row">
                <div class="col-sm-2 quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'python_logo.png' %}" alt="python_logo">
                    <p>
                      python
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'AWS-logo-2.jpg' %}" alt="aws_logo">
                    <p>
                      aws
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'selenium.png' %}" alt="selenium_logo">
                    <p>
                      selenium
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'Csharp_Logo.png' %}" alt="csharp_logo">
                    <p>
                      C#
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'django.png' %}" alt="django_logo">
                    <p>
                      django
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'docker.png' %}" alt="docker_logo">
                    <p>
                      docker
                    </p>
                  </div>
                </div>
              </div>

Answer 1

使用 Flexbox 可能是最简单的。在此演示中，我将内容放入可调整大小的容器中，以便您可以看到项目如何回流。

#resizeAreaForDemo {
  border: 2px dotted;
  padding: 10px;
  width: 450px;
  resize: both;
  overflow: auto;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}

.row .quick_skills_col {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 100px;
  /* the min size you want these to be */
  height: 80px;
  background: #eee;
  border: 1px solid grey;
}

.row .quick_skills_col img {font-size:8px;}

<div id="resizeAreaForDemo">

<div class="row">
                <div class="col-sm-2 quick_skills_col" id="box0">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'python_logo.png' %}" alt="python_logo">
                    <p>
                      python
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box1">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'AWS-logo-2.jpg' %}" alt="aws_logo">
                    <p>
                      aws
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box2">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'selenium.png' %}" alt="selenium_logo">
                    <p>
                      selenium
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box3">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'Csharp_Logo.png' %}" alt="csharp_logo">
                    <p>
                      C#
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box4">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'django.png' %}" alt="django_logo">
                    <p>
                      django
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box5">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'docker.png' %}" alt="docker_logo">
                    <p>
                      docker
                    </p>
                  </div>
                </div>
              </div>
              </div>