具有固定和可变元素的Flex css布局
我希望在纯CSS中创建以下布局。我知道我可以用JavaScript解决方案实现这一点，但如果可能的话，CSS解决方案会更干净 我已经创建了一个我知道是不正确的，以提供一个起点。我在JSFIDLE中使用的HTML和CSS如下所示 注:具有固定和可变元素的Flex css布局,css,flexbox,Css,Flexbox,我希望在纯CSS中创建以下布局。我知道我可以用JavaScript解决方案实现这一点，但如果可能的话，CSS解决方案会更干净 我已经创建了一个我知道是不正确的，以提供一个起点。我在JSFIDLE中使用的HTML和CSS如下所示 注: 我想用这个来填满整个窗口的高度，这样页面就没有滚动条了（但请看我的最后一点） 有两个部分可以包含数量可变的元素 红色元素是用户可以动态添加的图像，它将被赋予一个具有固定纵横比的帧（此处显示为正方形） 绿色部分将包含一个至少有一个项目的列表，因此它将有一个固定的最
- 我想用这个来填满整个窗口的高度，这样页面就没有滚动条了（但请看我的最后一点）
- 有两个部分可以包含数量可变的元素
- 红色元素是用户可以动态添加的图像，它将被赋予一个具有固定纵横比的帧（此处显示为正方形）
- 绿色部分将包含一个至少有一个项目的列表，因此它将有一个固定的最小高度。它最多可能有四个项目，因此其高度可能会发生变化。我不想让这个部分滚动。如果用户使窗口太短，绿色和蓝色元素都无法显示全高，则整个页面将不得不滚动
<!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>
弯曲
正文，html{
身高：100%；
保证金：0；
背景：#000；
}
主要{
宽度：30em；
身高：100%；
保证金：0自动；
背景：#333；
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
}
.头{
宽度：100%；
-webkit-flex:3em；
flex:3em；
背景：#fcc；
}
.扩大{
宽度：100%；
溢出：自动；
}
.填料{
宽度：100%；
高度：20em；
背景：#003；
边框底部：1px实心#fff；
}
.空间{
宽度：100%；
高度：10公分；
边框底部：1px实心#fff；
}
.英尺{
宽度：100%；
-webkit-flex:02em；
弯曲度：0.02米；
背景：#cfc；
}
头
脚
main{
高度：自动；
最小高度：100%；
}
.头{
最小高度：3em；
}
.英尺{
最小高度：2米；
}
.扩大{
弹性基准：0；/*初始高度*/
flex增长：1；/*尽可能增长*/
溢出：自动；
}
body，
html{
身高：100%；
保证金：0；
背景：#000；
}
主要{
宽度：20em；
最小高度：100%；
保证金：0自动；
背景：#333；
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
}
.头{
宽度：100%；
最小高度：3em；
背景：#fcc；
}
.扩大{
宽度：100%；
弹性基准：0；
柔性生长：1；
溢出：自动；
}
.填料{
宽度：100%；
高度：20em；
背景：#003；
边框底部：1px实心#fff；
}
.空间{
宽度：100%；
高度：2米；
边框底部：1px实心#fff；
}
.英尺{
宽度：100%；
最小高度：2米；
背景：#cfc；
}
头
脚
溢出：auto.expandheight:auto