我有一个左右摇摆的动作:
.wrapper { 显示:flex; flex-direction:行; 对齐项目:伸展; 宽度:100%; 身高:70 vh; 最小高度:325 px; max-height: 570 px; ｝ .wrapper >。离开{ 背景:# fcc; ｝ .wrapper >。正确的{ 背景:# ccf; ｝ < div class = "包装" > 左< div class = "左" > < / div > < div class = "对" >对< / div > < / div >
问题是正确的孩子没有反应。具体来说，我希望它填充包装的高度。
如何做到这一点?
row-flexbox容器的子容器自动填充容器的垂直空间。 指定flex: 1;对于child，如果你想让它填充剩余的水平空间:
.wrapper { 显示:flex; flex-direction:行; 对齐项目:伸展; 宽度:100%; 身高:5 em; 背景:# ccc; ｝ .wrapper >。离开{ 背景:# fcc; ｝ .wrapper >。正确的{ 背景:# ccf; flex: 1; ｝ < div class = "包装" > 左< div class = "左" > < / div > < div class = "对" >对< / div > < / div >
指定flex: 1;对于两个子元素，如果你想让它们填充等量的水平空间:
.wrapper { 显示:flex; flex-direction:行; 对齐项目:伸展; 宽度:100%; 身高:5 em; 背景:# ccc; ｝ .wrapper > div { flex: 1; ｝ .wrapper >。离开{ 背景:# fcc; ｝ .wrapper >。正确的{ 背景:# ccf; ｝ < div class = "包装" > 左< div class = "左" > < / div > < div class = "对" >对< / div > < / div >
简单的回答:只需使用flex:1;对孩子的
.wrapper {
display: flex;
flex-direction: row;
.
.
.
}
.wrapper > * {
flex: 1;
}
记住，你通常不能使用width:…和flex: 1;一起为了一个孩子。
由于您的容器(包装器)中只有两个子容器，因此您所要做的就是添加display: flex;而justification -content:空格;而不是玩弄利润。
关于高度，你可以设置你想要的父(武器)的高度，例如100px，然后设置两个子(左和右)的高度为100%。
.wrapper { 显示:flex; justify-content:之间的空间; 身高:100 px; ｝ .wrapper >。离开{ 背景:# fcc; 高度:100%; ｝ .wrapper >。正确的{ 背景:# ccf; 高度:100%; flex: 1; ｝ < div class = "包装" > 左< div class = "左" > < / div > < div class = "对" >对< / div > < / div >
