Question

我刚刚开始使用HTML / CSS / Javascript并有一个问题。我已经浏览了Flexbox上的MDN页面，但我没有看到如何使用它设置固定布局。这就是我的意思：

<div class="wrapper">
  <div class="top">
    <div class="left"> Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
      PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock. </div>
    <div class="right"> Second Second Second Second Second Second Second Second Second Second Second</div>
  </div>
  <div class="bottom"> Down</div>
</div>

我有一个“包装”div（指定为flex），用于保存“top”div和“bottom”div。无论显示器的大小如何，我都希望“top”div占据我页面的70％。我也希望“底部”div占据我页面的底部30％，而不管显示器的大小。我在MDN上看到了一些使用浮点数来实现这一目标的代码，但我想知道如何在flexbox中执行此操作？以下是我目前在CSS中的内容：

.wrapper {
  display: flex;
  flex-flow: column wrap;
  min-height: 70% /*doesn't work*/
}

.top{
  display: flex;
  flex-flow: row;
}

.left {
  width: 48%;
  float: left;
}

.right {
  width: 48%;
  float: right;
}

.bottom {
  min-height: 30%
}

如果我错过了Flexbox中的一些重要观点，或者有人可以提出更多我可以阅读的资源以便更好地了解这一点，我将不胜感激！

这是一个jsfiddle link！

Answer 1

包装器需要占用整个视口 - 然后在其中，顶部需要被告知它是70％而底部30％是使用flex-basis。

有short-hand将flex-basis，flex-grow和flex-shrink组合为'flex';但是，这是我没有速记的解决方案，所以你可以看到每个css语句：

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%
}

.top{
  flex-basis: 70%;
  flex-grow: 0;
  flex-shrink: 0;
}

.bottom {
  flex-basis: 70%;
  flex-grow: 0;
  flex-shrink: 0;
}

你没有说左/右做什么;但是，我假设你只想要一个嵌套的flexbox。如果是这样，请将其添加到.top类

.top {
  display: flex;
  justify-content: space-between;
}

.left,
.right {
  flex-basis: 50%;
}

在Flexbox / CSS中设置固定高度？

1 个答案: