无法将CSS FlexBox设置为“行”

Question

我有一个实时搜索覆盖，它有一个包含三个“结果”容器的flex容器，这三个容器都是flex容器。他们的孩子的flex方向工作得很好，但是结果本身不接受“flex方向: row”，只是在搜索flex容器中彼此排列在一起：

​

.search-container {
  position: absolute;
  display: flex;
  flex-direction: row;
  padding-top: 60px;
  padding-bottom: 30px;
  right: 105px;
  top: 43px;
  width: 70%;
  height: 500px;
  background-color: rgba(214, 224, 214, 0.94);
  z-index: 2;
}

.search-results-1 {
  width: 30%;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  overflow: auto;
  margin-left: 20px;
  height: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.search-post-item {
  position: relative;
}

.search-results-1 p {
  position: absolute;
  top: 10px;
  left: 150px;
}

.search-post-excerpt {
  position: absolute;
  top: 30px !important;
  width: 47%;
  overflow-wrap: break-word;
}

.search-post-img {
  display: inline-block;
  margin-top: 20px !important;
  margin-left: -2px !important;
}

<div class="search-container search-overlay-close">
  <form action="" method="POST">
    <input type="text" name="searchcontent" placeholder="Watcha Lookin For?" id="search">
    <button type="submit" name="search">
    <i class="fas fa-search search-glass"></i>
    </button>

    <i class="fa fa-times search-close" aria-hidden="true"></i>
  </form>

  <div class="search-results-1"></div>
  <div class="search-results-2"></div>
  <div class="search-results-3"></div>
</div>

​

这是css(有三个“..search结果”，但是它们是相似的，所以我只包括了第一个)：

我没有为表单包括CSS，因为它是“绝对的”。最后，这是通过AJAX注入到每个“搜索结果”容器中的HTML。

<div class="search-post-item">
  <a href="pages/post.php?id=<?php echo $post['id']; ?>" class="search-post-img"><img src="files/thumbnails/<?= $post['thumb'] ?>" alt=""></a>
  <p><a href="pages/post.php?id=<?php echo $post['id']; ?>"><?php echo $post['title']; ?></a></p>
  <p class="search-post-excerpt"><?php echo strip_tags(substr($post['content'], 0, 100)); ?></p>
</div>

顺便说一句，整件事和“浮动”都很好。但我只想让它更有反应。

Answer 1

有几件事你可以改进。就像在使用flex时一样，您可以使用gap而不是对孩子使用边距(这通常会导致像您这样的问题)。在您的例子中，您也可以使用网格来实现search-container。另外，如果您的search-results是“相同的”，您可以使用一个具有相同属性的类，并为不同的属性添加一个“修饰符类”。

我删除了应该在基本css中的box-sizing: border-box;，并将其应用于应用程序中的所有元素。

盒-尺寸

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  box-sizing: border-box;
}

搜索

​

.search-container {
  position: absolute;
  padding-top: 60px;
  padding-bottom: 30px;
  right: 105px;
  top: 43px;
  width: 70%;
  height: 500px;
  background-color: rgba(214, 224, 214, 0.94);
  z-index: 2;
}

.search-result-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.search-results {
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  overflow: auto;
  height: 100%;
}

.search-results-1 {
  background-color: aqua;
}

.search-results-2 {
  background-color: aquagreen;
}

.search-results-3 {
  background-color: red;
}

.search-post-item {
  position: relative;
}

.search-results-1 p {
  position: absolute;
  top: 10px;
  left: 150px;
}

.search-post-excerpt {
  position: absolute;
  top: 30px !important;
  width: 47%;
  overflow-wrap: break-word;
}

.search-post-img {
  display: inline-block;
  margin-top: 20px !important;
  margin-left: -2px !important;
}

<div class="search-container search-overlay-close">
  <form action="" method="POST">
    <input type="text" name="searchcontent" placeholder="Watcha Lookin For?" id="search">
    <button type="submit" name="search">
    <i class="fas fa-search search-glass"></i>
    </button>

    <i class="fa fa-times search-close" aria-hidden="true"></i>
  </form>

  <ul class="search-result-list">
    <li class="search-results search-results-1"></li>
    <li class="search-results search-results-2"></li>
    <li class="search-results search-results-3"></li>
  </ul>
</div>

​