首页 / 技术问答 / Css问答列表 / 问答详情

Css flexwrap 导致 children 身高加倍

正如标题所说，当在父div上启用flex-Wrap:WRAP时，子网格容器的高度会加倍.我希望它不要这么做，但更重要的是，为什么会发生这种情况？

我以为如果/当添加更多网格项以使其换行时，网格的高度会简单地进行调整……但我显然遗漏了一些东西.

我希望它看起来像启用flex-wrap:nowrap时的样子，但我也希望它能包装起来……

View it on Codepen个

.container {
  width: 88%;
  margin: 2rem auto;
  max-width: 1400px;
}

.cno-event-search-filters__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cno-event-search-filters__filter-container {
  border: 2px solid black;
  display: grid;
  grid-template-columns: repeat(auto-fit, max(240px));
  gap: 1rem;
}
<div class="container">
  <div class="cno-event-search-filters">
    <div class="cno-event-search-filters__container">
      <h4 class="cno-event-search-filters__title">Event Types</h4>
      <div class="cno-event-search-filters__filter-container">
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Culture">
          <label for="Culture">Culture</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Entertainment">
          <label for="Entertainment">Entertainment</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Sports">
          <label for="Sports">Sports</label>
        </div>
      </div>
    </div>
    <div class="cno-event-search-filters__container">
      <h4 class="cno-event-search-filters__title">Locations</h4>
      <div class="cno-event-search-filters__filter-container">
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Ampitheatre">
          <label for="Ampitheatre">Ampitheatre</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Capitol Lawn">
          <label for="Capitol Lawn">Capitol Lawn</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Capitol Museum">
          <label for="Capitol Museum">Capitol Museum</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Chapel">
          <label for="Chapel">Chapel</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Choctaw Village">
          <label for="Choctaw Village">Choctaw Village</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Playground">
          <label for="Playground">Playground</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Red Warrior Park">
          <label for="Red Warrior Park">Red Warrior Park</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Stickball Field">
          <label for="Stickball Field">Stickball Field</label>
        </div>
      </div>
    </div>
  </div>
</div>

推荐答案

这个怪癖有点棘手，所以我会试着用简单的词来解释正在发生的事情.

首先，在定义flex-wrap时，您可以控制布局的性质，如the Specification中所述:

FLEX-WRAPH属性控制Flex容器是单行还是多行，

nowrap个

弹性容器是single-line.

wrap个

弹性容器是multi-line.

即使在您的情况下，当您添加flex-wrap: wrap时只有一行，您的布局仍然被视为"多行"，并且算法与"单行"略有不同.

差异与每行大小的计算方式有关，这也会影响项目的大小.这里是宽度，因为我们有一个列方向.

当您有一个"单行"布局(flex-wrap: nowrap)时，计算线的宽度就很容易了.从the Specification

如果弹性容器是单线并且具有确定的十字大小，则弹性线的交叉大小是弹性容器的内交叉大小.

您的容器是一个块元素，所以它的全宽(确定的十字大小).该宽度用作线条的大小，其中的元素将拉伸以适应该大小.这是一种合乎逻辑的行为，但我们可以改变它，只要go 掉那个拉伸部分.

.container {
  width: 88%;
  margin: 2rem auto;
  max-width: 1400px;
}

.cno-event-search-filters__container {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.cno-event-search-filters__filter-container {
  border: 2px solid black;
  display: grid;
  grid-template-columns: repeat(auto-fit, max(240px));
  gap: 1rem;
}
<div class="container">
  <div class="cno-event-search-filters">
    <div class="cno-event-search-filters__container">
      <h4 class="cno-event-search-filters__title">Event Types</h4>
      <div class="cno-event-search-filters__filter-container">
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Culture">
          <label for="Culture">Culture</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Entertainment">
          <label for="Entertainment">Entertainment</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Sports">
          <label for="Sports">Sports</label>
        </div>
      </div>
    </div>
    <div class="cno-event-search-filters__container">
      <h4 class="cno-event-search-filters__title">Locations</h4>
      <div class="cno-event-search-filters__filter-container">
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Ampitheatre">
          <label for="Ampitheatre">Ampitheatre</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Capitol Lawn">
          <label for="Capitol Lawn">Capitol Lawn</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Capitol Museum">
          <label for="Capitol Museum">Capitol Museum</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Chapel">
          <label for="Chapel">Chapel</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Choctaw Village">
          <label for="Choctaw Village">Choctaw Village</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Playground">
          <label for="Playground">Playground</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Red Warrior Park">
          <label for="Red Warrior Park">Red Warrior Park</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Stickball Field">
          <label for="Stickball Field">Stickball Field</label>
        </div>
      </div>
    </div>
  </div>
</div>

请注意，您的网格中只有一列240px，因为您的元素不再在整行内拉伸，并且CSS网格算法将在its algorithm之后只创建一列

当自动填充作为重复编号时，如果栅格容器在相关轴上有一个definite size or max size，...否则，如果栅格容器在相关轴上有definite min size...否则，指定的曲目列表仅重复一次.

您的网格容器没有确定的大小，没有最大大小和最小大小，所以我们落入最后一个"否则"，我们以一次重复结束.(请注意，这里的auto-fit和auto-fill使用相同的算法)

现在，当你有一个"多行"布局时，定义行数和行大小的算法比"单行"布局要复杂得多，而且不同于"单行"布局，即使最后你只有一条线.这是最棘手的部分，您需要知道的是物品的大小是用来标识线条的大小的.

换句话说，我们需要首先确定元素大小来确定线的大小，而您的网格容器没有确定的大小、没有最大大小和最小大小，所以我们陷入了前面相同的情况，即我们以一列结束.然后，Flexbox算法将识别一条线.然后拉伸对齐将使网格容器全宽，auto-fit算法将再次点击以创建更多的列，但网格容器的高度不会改变，这是一个怪异之处.

在找到行数并定义它们的大小之前，我们首先计算网格容器的宽度/高度.在找到线条的数量及其大小之后，宽度将被更新(由于拉伸对齐)，但高度不会改变.列数将发生变化，因为我们有空间容纳它们.

如果你做一个比较，你会发现高度等于没有grid-template-columns的容器的大小.添加flex-wrap: wrap并使用开发工具禁用grid-template-columns，高度不会改变.当我们禁用stretch对齐时，该高度也是相同的

enter image description here

这是你的 case 的简化版本.调整主容器的大小，注意内部容器的高度不会改变.

.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* align-items: start; try to disable this to see the difference */
  border:2px solid #000;
  overflow: hidden;
  resize: horizontal;
}
.box > div {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, 100px);
  border:2px solid red;
}
<div class="box">
  <div>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</div>

要解决这个问题并允许高度更改，您需要像算法中那样设置"定义的大小、最大大小或最小大小".

min-width: 100%或width: 100%就可以胜任这项工作

.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* align-items: start; try to disable this to see the difference */
  border:2px solid #000;
  overflow: hidden;
  resize: horizontal;
}
.box > div {
  display: grid;
  width: 100%;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, 100px);
  border:2px solid red;
  box-sizing: border-box;
}
<div class="box">
  <div>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</div>

Css相关问答推荐

当optgroup元素不包含任何未使用CSS禁用的选项元素时，如何隐藏它

在Powershell中使用正则表达式编辑css文件

当滚动到页脚时，是否可以隐藏固定元素？

如何居中对齐容器父对象？

我找不出Firefox上奇怪的css行为的原因

CSS 内联 Flex 和段落换行

如何为 React Native switch 组件创建标签？

在 Tailwind css 中，间距对我不起作用

用户代理必须处理(或表现得好像他们这样做)每个链接就好像链接指向单独的样式表这句话是什么意思？

在 React Native 中创建背景

热门制作渐变半红/半蓝？

Bootstrap 类似乎没有任何作用

如何禁用亚像素渲染或强制浏览器将属性舍入到最近的像素？

如何制作一个居中的标题样式，其中换行符将最长的行排列在底部

iPhone X / 8 / 8 Plus CSS 媒体查询

水平列表项

Bootstrap 3 Glyphicons CDN

如何水平对齐 span 或 div？

堆叠半透明盒子的 colored颜色 取决于订单？

为什么只为第一个元素显示双引号？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630