gpt4 book ai didi

css - 如何让我的 flexbox 元素划分容器的总高度?

转载 作者:行者123 更新时间:2023-11-28 10:59:27 25 4
gpt4 key购买 nike

我想让左边的元素分布在容器的高度上,占总高度的 100%。

enter image description here

我该怎么做?

注意:“item”是动态数据

.item {
border: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="row">
<div class="col-6" style="border:1px solid red;">
<div class="d-flex m-0">
<div class="item">
item
</div>
</div>
<div class="d-flex m-0">
<div class="item">
item
</div>
</div>
</div>
<div class="col-6" style="border:1px solid red;">
<div class="d-flex m-0">
<div class="flex-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis libero incidunt rem nisi delectus aliquam maiores hic doloremque aliquid aut! Vitae ex architecto deserunt minima inventore ratione similique ipsa? Facere.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto enim officia itaque, quaerat quisquam deserunt, omnis quae, quas quod maxime at impedit ducimus vel aspernatur. Commodi unde amet itaque alias.
</div>
</div>
</div>
</div>

View on JSFiddle

最佳答案

你可以使用flex-direction: column,像这样:

.left-column {
display: flex;
flex-direction: column;
}

.d-flex{
border: 1px solid gray;
flex: 1;
}

如果你想垂直对齐元素,你可以添加:

.d-flex {
...
align-items: center;

}

See it on this fiddle

关于css - 如何让我的 flexbox 元素划分容器的总高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56801235/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com