Question

嗯，我对flex不太好，还是一个新手，也许这就是为什么我会遇到我的问题。我有一个主元素，其他元素使用flex，因此它们可以像一行中的2或3。我可以用弹性相同的高度制作它们，这很酷，但我需要制作这些柔性元素的同样高的儿童。足够的写作，让我们看看jsFiddle

中的例子

正如你所看到的，我想制作这些＆＃34; red＆＃34;元素同样高。这是我风格的简单SCSS示例：

.main {
    display: flex;
    background: lightblue;

    .left, .right {
        flex: 1;
        margin: 15px;
        background: rgba(white,0.5);

        .content {
            padding: 15px;

            .inner {
                padding: 10px;
                background: rgba(red,0.3)
            }
        }
    }
}

Answer 1

如评论中所述，您无法均衡子元素的高度。但是针对您的具体情况有一种解决方法：

＆＃13;

.main {
  display: flex;
  background: lightblue;
}  
.left, .right {
  flex: 1;
  margin: 15px;
  border: 15px solid rgba(255,255,255,0.5);
  background: rgba(255,0,0,0.3);
  background-clip: padding-box; 

}        
.inner {
  padding: 10px;

}

＆＃13;

<div class="main">
    <div class="left">
        <div class="content">
            <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere metus tortor, eget cursus est aliquam vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in lacinia turpis. Donec dapibus facilisis sodales. Morbi id libero nisi. Nam tellus lacus, efficitur in ultrices vel, tincidunt ac nunc. Mauris egestas ligula eget leo iaculis pellentesque. Aliquam varius ante sapien, ultricies scelerisque est sagittis sed. Mauris rutrum rhoncus tristique.

Aliquam accumsan sem sed mollis ullamcorper. Vestibulum eros ante, elementum vitae nulla non, porta placerat justo. Phasellus at condimentum magna, eu pharetra nibh. Aenean tincidunt, nibh a rutrum fringilla, dolor velit sagittis orci, ut pulvinar dui nisl vitae mauris. Vestibulum fringilla, orci eget dapibus posuere, urna arcu dictum nisl, a scelerisque nisi orci in quam. Proin suscipit libero turpis, nec mollis orci mattis at. Nam ultrices lorem non ex fringilla ultrices. Nulla mattis dapibus nisl non sagittis. Phasellus accumsan nunc ipsum, non mollis ante viverra id. Praesent vel purus et nibh tempor vestibulum sed eu tortor. Curabitur ut congue sem.</div>
        </div>
    </div>
    <div class="right">
        <div class="content">
            <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere metus tortor, eget cursus est aliquam vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in lacinia turpis. Donec dapibus facilisis sodales.</div>
        </div>
    </div>
</div>

＆＃13;

这只是 visual 等高的解决方案。根据您的实际目标，这可能不合适。

使柔性物品的儿童高度相等

1 个答案: