对于具有两个等高子项的Flexbox布局，其中一个子项包含带有滚动内容的嵌套flexbox感兴趣的读者，本文将会是一篇不错的选择，并为您提供关于css–flexboxvs表,为什么我们需要flexbo
对于具有两个等高子项的Flexbox布局，其中一个子项包含带有滚动内容的嵌套flexbox感兴趣的读者，本文将会是一篇不错的选择，并为您提供关于css – flexbox vs表,为什么我们需要flexbox？、css – Flexbox：-webkit-box;, – emz-box;, – ms-flexbox; &-webkit-flex;这些是什么？、css – 具有flexbox布局的大型第一项？、css – 创建一行flexbox项目,其中一个子项定义的最大高度为的有用信息。
本文目录一览：- 具有两个等高子项的Flexbox布局，其中一个子项包含带有滚动内容的嵌套flexbox
- css – flexbox vs表,为什么我们需要flexbox？
- css – Flexbox：-webkit-box;, – emz-box;, – ms-flexbox; &-webkit-flex;这些是什么？
- css – 具有flexbox布局的大型第一项？
- css – 创建一行flexbox项目,其中一个子项定义的最大高度为
具有两个等高子项的Flexbox布局，其中一个子项包含带有滚动内容的嵌套flexbox
我<img>的面板右侧包含一个控件标题和一长串项目。所以我有一个嵌套的flexbox情况：
.container (flex) -> .child img -> .child controls panel (flex) -> .controls -> .content-wrapper scrolling list从最基本的角度来说，两个并排面板很容易，可以通过align-items: stretch..轻松进行操作
一旦右侧面板的垂直滚动列表变得更加复杂，我便看不到如何使其父级（第二个.child）的高度与第一个高度匹配.child。
+-------------+---------------+| | Controls || Left child | || +---------------+| | A|| | Vertically |+| | scrolling ||| | items ||| | |+| | V|+-------------+---------------+我已经阅读了[具有可滚动内容的Flexbox项目，但是它解决了水平滚动问题，而不是像这样的垂直布局。此外，带滚动区域嵌套Flexbox的涉及垂直堆叠嵌套flexboxes，我觉得这个组合row与column方向混淆了我的情况。
作为代码段：
.container { display: flex; align-items: stretch;}.child { border: 1px solid grey; background-color: lightgrey; flex: 1 1 auto;}.controls-panel { display: flex; flex-direction: column;}.controls { flex: 0 0 auto;}.content-wrapper { flex: 1 1 auto; width: 400px; overflow-y: auto;}.content-item { display: inline-block; width: 100px; height: 100px; background-color: red;}<div> <div> <p>In real life I am an inline img.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I want my sibling to equal my height.</p> </div> <div> <div> <p>Small controls area. Panel below should scroll vertically.</p> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div></div>我不想在这里固定任何元素的高度。碰巧的是，我知道img的高度，因此我可以使用CSS强制将元素的高度设置在右侧，但是我想知道是否存在解决此问题的“真”Flexbox方法。
答案1
小编典典通常，为了使overflow:scroll（或auto和hidden）起作用，需要以一种或另一种方式来设置高度限制，否则元素的大小通常会增长到适合其内容的程度。
主要有3种方法，其中一个是设置实际高度，如在第一个示例中一样，我将其添加到container。
堆栈片段1
.container { display: flex; height: 100vh;}.child { border: 1px solid grey; background-color: lightgrey; flex: 1 1 auto;}.controls-panel { display: flex; flex-direction: column;}.controls { flex: 0 0 auto;}.content-wrapper { flex: 1 1 auto; width: 400px; overflow-y: auto;}.content-item { display: inline-block; width: 100px; height: 100px; background-color: red;}<div> <div> <p>In real life I am an inline img.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I want my sibling to equal my height.</p> </div> <div> <div> <p>Small controls area. Panel below should scroll vertically.</p> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div></div>或使用绝对定位来创建该 高度约束 ，而绝对元素会这样做。
只需使用一个额外的包装器即可完成content-scroll，并使其他结构保持完全动态。
堆栈摘要2
.container { display: flex;}.child { border: 1px solid grey; background-color: lightgrey; flex: 1 1 auto;}.controls-panel { display: flex; flex-direction: column;}.controls { flex: 0 0 auto;}.content-wrapper { position: relative; flex: 1 1 auto; width: 400px;}.content-scroll { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto;}.content-item { display: inline-block; width: 100px; height: 100px; background-color: red;}<div> <div> <p>In real life I am an inline img.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I want my sibling to equal my height.</p> </div> <div> <div> <p>Small controls area. Panel below should scroll vertically.</p> </div> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div></div>单独使用Flexbox，以为它可能无法完全跨浏览器运行，特别是对于仍支持它的旧版本，但它的bug很大。
原始代码中的简单修复方法是将flex: 1 1 auto;in 更改.content-wrapper为flex: 1 10px;（0px我的IE版本需要使用，Chrome / Firefox / Edge可以使用0）
堆栈摘要3
.container { display: flex;}.child { border: 1px solid grey; background-color: lightgrey; flex: 1 1 auto;}.controls-panel { display: flex; flex-direction: column;}.controls { flex: 0 0 auto;}.content-wrapper { flex: 1 1 0px; width: 400px; overflow-y: auto;}.content-item { display: inline-block; width: 100px; height: 100px; background-color: red;}<div> <div> <p>In real life I am an inline img.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I want my sibling to equal my height.</p> </div> <div> <div> <p>Small controls area. Panel below should scroll vertically.</p> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div></div>片段2和3也会回答您的问题
…通过垂直滚动列表，我看不到如何使其父级（第二个
.child）的高度与第一个高度匹配.child。
注意，如果右列中的顶部元素可以大于左列，则底部元素将需要最小高度，以防止其塌陷为0，例如
.content-wrapper { ... min-height: 200px; /* e.g. like this */}
css – flexbox vs表,为什么我们需要flexbox？
它根本不支持IE10,这在不久的将来不是很好,我只是看不到任何好处超过表布局.但是,互联网仍然开始充满这种新的CSS布局方法的“崇拜者”,我看到的所有例子都可以轻松地用正常的CSS完成,没有问题.
更新25.12.15：
自从引入到现代浏览器以来,我一直在使用flexBoxes,并停止使用display：table等,因为flexBoxes更强大,易于使用.
解决方法
>无论HTML源代码如何,都能够重新排序元素,同时保持正常流程中的元素 – 您可以通过使用order属性指定整数值来执行此操作.
>它比传统的浮动布局(您不需要所有的伪元素来清除目的)需要更少的打字,而且更为语义,而对于布局使用浮点数或表格显然不是.
>通过使用flex-grow和flex-shrink属性,Flex项目可以根据祖先元素的尺寸进行生长和缩小以填充水平和垂直空间的能力.
问题(正如你所指出的),支持还是不错的;事实上,Firefox仍然在实现较早版本的flexBox模块,因此您必须根据您使用的浏览器来解释语法和行为的微小差异.不过,已经说了很多,这是布局的未来,特别是复杂的网络应用程序更频繁地出现.如果您能够做出不可避免的明智投资,这是值得学习的 – 以现在不能真正使用的代价.
我还建议你看看this smashing magazine article,以便对flexBox进行友好的介绍(这是最近写的)
css – Flexbox：-webkit-box;, – emz-box;, – ms-flexbox; &-webkit-flex;这些是什么？
如果有人能对此有所了解,我将不胜感激.
谢谢！
解决方法
当您了解浏览器的工作功能时,您会更清楚.
实际上所有的浏览器都在他们的特定引擎上运行.我们编写的CSS语法或功能是什么,这些引擎在浏览器上呈现它们的行为.
Webkit
是最受欢迎的浏览器引擎,由chrome safari等使用.因此,这些供应商的优惠用于告诉浏览器我们应该使用哪些css属性.
css – 具有flexbox布局的大型第一项？
我有一个布局,包含一个包含一堆项目的有序列表.
所有项目都具有一致的宽度和高度 – 除了第一项 – 宽(3x)和(2x)更高.它看起来像这样：
ol {
padding:0;
margin:0;
min-width: 488px;
}
li {
list-style: none;
width: 150px;
padding-bottom: 16.66%;
border: 5px solid tomato;
display: inline-block;
}
li:first-child {
float:left;
width: 478px;
border-color: green;
padding-bottom: 34.25%;
margin: 0 4px 4px 0;
}
Codepen Demo(调整视口大小以查看效果)
目前,我正在使用浮动和内联块来实现布局,但我想使用flexBox,因为flexBox提供了一些额外的功能.
我做了几次尝试,但没有成功 –
尝试#1 – Codepen
ol {
/* ... */
display: flex;
flex-wrap: wrap;
}
尝试#2 – Codepen
在列表前使用浮动以确保第一个大型列表项的空间
然后在第一个列表项上设置显示绝对值.
在两次尝试中,第一行中的红色框都会拉伸以填充第一个项目的高度.
这可能吗？
(如果没有,那么我会对CSS网格解决方案感兴趣)
最佳答案
所以很明显FlexBox不能产生这样的布局.所以我会回答这部分问题：
If not,then I would be interested in a CSS grid workaround
使用CSS Grid Layout Module,这非常容易生产：
基本上相关的代码归结为：
Codepen Demo(调整大小以查看效果)
ul {
display: grid; /* (1) */
grid-template-columns: 120px 120px repeat(auto-fill,120px); /* (2) */
grid-template-rows: repeat(auto-fill,150px); /* (3) */
grid-gap: 1rem; /* (4) */
justify-content: space-between; /* (5) */
}
li:first-child {
grid-column: 1 / 4; /* (6) */
grid-row: 1 / 3; /* (7) */
}
1)使容器元素成为网格容器
2)将网格设置为至少3列宽度为120px的列. (自动填充值用于响应式布局).
3)将网格设置为150px高行.
4)设置网格行和列的间隙/檐槽 – 这里,因为需要’间隔’布局 – 间隙实际上是最小间隙,因为它将根据需要增长.
5)类似于flexBox.
6)占据前三列
7)占据前两排
body {
margin: 0;
}
ul {
display: grid;
grid-template-columns: 120px 120px repeat(auto-fill,120px);
grid-template-rows: repeat(auto-fill,150px);
grid-gap: 1rem;
justify-content: space-between;
/* boring properties: */
list-style: none;
width: 90vw;
height: 90vh;
margin: 4vh auto;
border: 5px solid green;
padding: 0;
overflow: auto;
}
li {
background: tomato;
min-height: 150px;
}
li:first-child {
grid-column: 1 / 4;
grid-row: 1 / 3;
}
浏览器支持 – Caniuse
目前由Chrome(Blink)和Firefox支持,得到IE和Edge的部分支持(见Rachel Andrew的this post)
css – 创建一行flexbox项目,其中一个子项定义的最大高度为
我正在尝试创建一个flexBox布局,它做了一些我认为会更容易的事情,但是我找不到正确的方法.
我希望有一排具有动态高度的项目,允许一个孩子根据需要增长,但限制其他项目的高度,以便切断内容.
我想使用flexBox,因此与此相关的浏览器问题不是问题,但我想避免在解决方案中使用JavaScript.
有任何想法吗？这可能是一个微不足道的问题,但我无法使用我一直在使用的搜索词找到任何内容.谢谢！
这是一个CodePen demo,以防你想修改它以便在你的答案中使用.
这是我的参考flexBox布局：
.row {
display: flex;
}
.info {
flex: 0 0 200px;
}
.description {
flex: 1 1 auto;
}
<div>
<div>This should grow dynamically</div>
<div>This should be limited in height by the .info div</div>
</div>
解决方法
你需要一个绝对定位的第二个孩子内部元素.
这里额外的内容是/可以隐藏溢出：隐藏…或通过添加overflow：auto显示.
.wrapper {
display: flex;
width: 80%;
margin: 1em auto;
border: 2px solid red;
}
.child {
flex: 1;
border: 2px solid green;
}
.child:nth-child(2) {
position: relative;
overflow: auto;
/*overflow: hidden; */ /* removed for demo purposes */
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div>
<div>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Debitis tenetur,laboriosam! Ab facilis,officia id delectus eaque expedita quia,incidunt eligendi aut,minus temporibus tenetur.</div>
<div>
<div>
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Quae molestiae,libero inventore nobis et veritatis,laborum vitae,vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
asperiores. Unde,rerum nihil maiores nisi,iusto voluptate id cumque incidunt,perspiciatis facilis perferendis explicabo.
</div>
</div>
</div>
今天关于具有两个等高子项的Flexbox布局，其中一个子项包含带有滚动内容的嵌套flexbox的分享就到这里，希望大家有所收获，若想了解更多关于css – flexbox vs表,为什么我们需要flexbox？、css – Flexbox：-webkit-box;, – emz-box;, – ms-flexbox; &-webkit-flex;这些是什么？、css – 具有flexbox布局的大型第一项？、css – 创建一行flexbox项目,其中一个子项定义的最大高度为等相关知识，可以在本站进行查询。
本文标签：
