Html 如何使用css flex Box创建滑块布局？

我正在尝试使用flex Box创建滑块布局，如下图所示：

在这里，我有大照片在右侧和缩略图项目在左侧。我想调整左侧和缩略图包装与大照片的高度。但不幸的是，这不可能只适用于flex框，我应该用JavaScript检查大照片的高度，并将左侧与之对齐

例如，检查以下代码：

main{
位置：绝对位置；
顶部：0px；
左：0px；
右：0px；
底部：0px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.包装纸{
宽度：500px；
溢出：隐藏；
背景：灰色；
显示器：flex；
调整项目：灵活启动；
证明内容：中心；
}
.对{
宽度：计算（100%-150px）；
高度：450px；
背景：红色；
}
.左{
宽度：150px；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
弯曲方向：立柱；
}
.项目{
宽度：100%；
高度：50px；
颜色：白色；
背景：绿色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

项目
项目
项目
项目
项目

此解决方案在

包装器上使用-use
display:grid
，使用
网格模板列：150px 1fr
（删除
右侧
和
左侧
元素中的
宽度
定义。）

现在将
height:100%
添加到
left
中，然后将项目
flex:1
添加到flexbox项目中，以占据来自
right
部分的动态高度-参见下面的演示：


main{
位置：绝对位置；
顶部：0px；
左：0px；
右：0px；
底部：0px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.包装纸{
宽度：500px；
溢出：隐藏；
背景：灰色；
display:grid；/*使其成为网格容器*/
网格模板列：150px 1fr；/*150px表示左侧，其余表示右侧*/
调整项目：灵活启动；
证明内容：中心；
}
.对{
/*宽度：计算（100%-150px）*/
高度：450px；
背景：红色；
}
.左{
/*宽度：150px*/
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
弯曲方向：立柱；
高度：100%；/*已添加*/
}
.项目{
宽度：100%；
高度：50px；
颜色：白色；
背景：绿色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弹性：1；/*增加*/
}

项目
项目
项目
项目
项目
根据我的评论，为了使左栏延伸到右栏的高度，只需从包装器中删除对齐项：


main{
位置：绝对位置；
顶部：0px；
左：0px；
右：0px；
底部：0px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.包装纸{
宽度：500px；
溢出：隐藏；
背景：灰色；
显示器：flex；
/*对齐项目：flex start；--删除此*/
证明内容：中心；
}
.对{
/*宽度：calc（100%-150px）；我会用flex grow替换它，这样就不需要硬值了*/
柔性生长：1；
高度：450px；
背景：红色；
}
.左{
宽度：150px；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
弯曲方向：立柱；
}
.项目{
宽度：100%；
高度：50px；
颜色：白色；
背景：绿色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

项目
项目
项目
项目
项目
如果您将容器的高度设置为您希望所有滑块的高度，则可以使用flexbox执行类似操作：


.container{
显示器：flex；
柔性流：柱包裹；
高度：250px；
宽度：250px；
}
.容器>*{
显示器：flex；
柔性流：行换行；
弹性：1100%；
}
.拇指{
弯曲方向：行；
右边距：5px；
}
.拇指{
背景：红色；
弹性：1100%；
保证金：5px0；
}
.大{
背景：蓝色；
保证金：5px；
}

您是否希望让缩略图填满左栏？（由于防火墙限制，我无法看到图像）如果是这样，只需删除
align items:flex start从你的包装上真的吗？你不能打开picofile.com吗？我是伊朗人，我只能在这个提供商上上传照片。弹性启动不起作用。因为当我想从上到左显示th图像时，感觉很舒服。但我想把所有的th文件都放在左边height@Pete新的演示链接：是的，防火墙阻止了所有的文件共享站点。不幸的是，第二个链接看起来就像我想你的意思——你试过从包装中删除flex start吗？我已经添加了图像内联@Pete希望你现在能在帖子中看到它。谢谢，但我还是不熟悉css网格布局。显然，只有css flex框是不可能的，我应该使用JS来管理左侧高度