CSS:不设定高度的环境,怎样让flex下的两个元素的高度划一

方法 1：使用 align-items: stretch（默认举动）

flex 容器的默认举动是 align-items: stretch，这意味着子元素的高度会主动拉伸到与容器高度划一。如果容器没有固定高度，子元素会以最高的子元素为准。
css

2. .container {
3.     display: flex; /* 启用 flex 布局 */
4.     align-items: stretch; /* 默认值，子元素高度会拉伸到一致 */
5. }
7. .item {
8.     /* 不需要设置高度 */
9. }

复制代码

html

2. <div class="container">
3.     <div class="item">内容1</div>
4.     <div class="item">内容2，这段内容更长，会撑开高度</div>
5. </div>

复制代码

---

方法 2：使用 flex-grow 或 flex: 1

如果盼望两个子元素的高度划一，而且宽度中分容器空间，可以使用 flex: 1 或 flex-grow: 1。
css

2. .container {
3.     display: flex;
4. }
6. .item {
7.     flex: 1; /* 让子元素平分空间，高度会自动一致 */
8. }

复制代码

html

2. <div class="container">
3.     <div class="item">内容1</div>
4.     <div class="item">内容2，这段内容更长，会撑开高度</div>
5. </div>

复制代码

---

方法 3：使用 align-self: stretch

如果只想让某个子元素的高度与其他子元素划一，可以使用 align-self: stretch。
css

2. .container {
3.     display: flex;
4. }
6. .item {
7.     align-self: stretch; /* 让当前子元素高度与其他子元素一致 */
8. }

复制代码

---

方法 4：使用 min-height 和 height: 100%

如果子元素的内容高度不划一，但仍旧盼望它们的高度划一，可以团结 min-height 和 height: 100%。
css

2. .container {
3.     display: flex;
4. }
6. .item {
7.     min-height: 100%; /* 确保高度一致 */
8. }

复制代码

---

总结

•         默认举动：flex 容器的 align-items: stretch 会让子元素高度划一。
  
•         机动布局：使用 flex: 1 可以让子元素中分空间，同时高度划一。
  
•         特别环境：如果必要单独控制某个子元素的高度，可以使用 align-self: stretch。
  

无需显式设置高度，flex 布局会主动处理处罚子元素的高度对齐标题。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。