具有固定和可变元素的 Flex css 布局答案

【问题标题】：Flex css layout with fixed and variable elements具有固定和可变元素的 Flex css 布局
【发布时间】：2015-07-28 23:26:52
【问题描述】：

我希望在纯 CSS 中创建以下布局。我知道我可以使用 JavaScript 解决方案来实现这一点，但如果可能的话，CSS 解决方案会更简洁。

我创建了一个我知道不正确的jsFiddle，以提供一个起点。我在 jsFiddle 中使用的 HTML 和 CSS 如下所示。

注意事项：

我希望它填满窗口的整个高度，这样页面就没有滚动条（但请参阅我的最后一点）
有两个部分可以包含可变数量的元素。
红色元素是用户可以即时添加的图像，它们将被赋予一个具有固定纵横比的帧（此处显示为正方形）
绿色部分将包含一个至少包含一项的列表，因此它具有固定的最小高度。它最多可能有四个项目，因此它的高度可能会改变。我不希望这部分滚动。如果用户使窗口太短，绿色和蓝色元素都无法显示全高，那么整个页面将不得不滚动。

我的问题是：这可以在纯 CSS 中完成吗？如果您知道有解决方案，并且您可以提供一些关于我如何实现它的指示，那么我可以继续朝着该解决方案努力。如果你知道没有办法，那我就干脆采用 JavaScript 的方式。

如果有解决方案，并且您很乐意分享，那么我会很高兴您为我节省了很多时间。

<!DOCTYPE html>
<html>
<head>
    <title>Flex</title>
    <style>
body, html {
height: 100%;
margin: 0;
background: #000;
}
main {
width: 30em;
height: 100%;
margin: 0 auto;
background: #333;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.head{
width:100%;
-webkit-flex: 3em;
        flex: 3em;
background: #fcc;
}
.expand{
width:100%;
overflow:auto;
}
.filler {
width:100%;
height:20em;
background: #003;
border-bottom: 1px solid #fff;
}
.space {
width:100%;
height:10em;
border-bottom: 1px solid #fff;
}
.foot{
width:100%;
-webkit-flex: 0 0 2em;
        flex: 0 0 2em;
background: #cfc;
}

    </style>
</head>
<body>
<main>
  <div class="head">HEAD</div>
  <div class="expand">
    <div class="space"></div>
    <div class="filler"></div>
    <div class="space"></div>
  </div>
  <div class="foot">FOOT</div>
</main>
</body>
</html>

【问题讨论】：

标签： css flexbox

【解决方案1】：

如果我理解得很好，

main {
    height: auto;
    min-height: 100%;
}
.head {
    min-height: 3em;
}
.foot {
    min-height: 2em;
}
.expand {
    flex-basis: 0; /* Initial height */
    flex-grow: 1; /* Grow as much as possible */
    overflow: auto;
}

body,
html {
  height: 100%;
  margin: 0;
  background: #000;
}
main {
  width: 20em;
  min-height: 100%;
  margin: 0 auto;
  background: #333;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.head {
  width: 100%;
  min-height: 3em;
  background: #fcc;
}
.expand {
  width: 100%;
  flex-basis: 0;
  flex-grow: 1;
  overflow: auto;
}
.filler {
  width: 100%;
  height: 20em;
  background: #003;
  border-bottom: 1px solid #fff;
}
.space {
  width: 100%;
  height: 2em;
  border-bottom: 1px solid #fff;
}
.foot {
  width: 100%;
  min-height: 2em;
  background: #cfc;
}

<main>
  <div class="head">HEAD</div>
  <div class="expand">
    <div class="space"></div>
    <div class="filler"></div>
    <div class="space"></div>
  </div>
  <div class="foot">FOOT</div>
</main>

【讨论】：

谢谢，这肯定会照顾垂直排列。但是，它不能确保红色元素在调整窗口大小或自动切换滚动条时保持其纵横比。我在想我需要将每个都包含在自己的 div 中，该 div 填充了 main 的（可用）宽度...
@JamesNewton 由于overflow: auto，滚动条会自动切换。如果.expand 包含图像，则这些图像具有固有的纵横比。只需在图片上使用height: auto，其高度将根据其宽度和纵横比计算。