使 flexbox 项目具有相同的高度

Question

I'm learning how to use Flexbox, and I can't get my boxes to do what I want.我正在学习如何使用 Flexbox，但我无法让我的盒子做我想做的事。 I want:我想：

Four boxes in a row, with a small gap in between them一排四个盒子，中间有一个小间隙
Each box should be the exact same size每个盒子的尺寸应该完全相同
The text inside the box should be centered horizontally and vertically, with lots of padding框内的文本应水平和垂直居中，并带有大量填充
Each box should be a link, and the entire box should be clickable;每个框都应该是一个链接，并且整个框都应该是可点击的； not just the text不仅仅是文字

The main problem I'm facing is that the boxes are not the same size when one has more text than the rest.我面临的主要问题是，当一个文本比其他文本多时，这些框的大小不同。 This is happening despite the parent element having the align-items: stretch attribute, which I thought was supposed to correct that.尽管父元素具有 align-items:stretch 属性，但我认为应该纠正该属性，但仍会发生这种情况。

Thanks for any help.谢谢你的帮助。 Here is my code:这是我的代码：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
        margin: 0;
        padding: 0;
        font-size: 30px;
    }
    
    .parent {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 5px;
    }
    
    .parent li {
        list-style: none;
        background: silver;
        padding: 100px 10px;
        text-align: center;
        flex: 1 0 25%;
        margin: auto;
        box-sizing: border-box;
    }
    
    .parent li a {
        margin: auto;
        padding: 100px 10px;
        text-decoration: none;
        color: #000000;
    }
  </style>
</head>

<body>
  <ul class="parent">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">This is box number three, and it has a lot more content than the others.</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</body>
</html>

Answer 1

I added random text there, to make sure it would increase the height, and still center to the text.我在那里添加了随机文本，以确保它会增加高度，并且仍然以文本为中心。

So basically, what I did, was use what you did and another flexbox on the a tag, to make it center no matter the height.所以基本上，我所做的就是使用你所做的和a标签上的另一个 flexbox，使其居中，无论高度如何。

 body { margin: 0; padding: 0; font-size: 30px; } .parent { margin: 0; padding: 0; gap: 5px; display: flex; align-items: stretch; flex-wrap: wrap; } .parent li { list-style: none; background: silver; padding: 100px 10px; text-align: center; flex: 1; margin: auto; box-sizing: border-box; padding: 5px; margin: 5px; } .parent li a { margin: auto; text-decoration: none; color: #000000; display: flex; justify-content: center; align-items: center; height: 100%; }

 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <ul class="parent"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">This is box number three, and it has a sjdsddsd lot more content thddd dsdssdd dssd sdsdsddddddan the others.</a></li> <li><a href="#">Four</a></li> </ul> </body> </html>

使 flexbox 项目具有相同的高度

问题描述

1 个解决方案

解决方案1
1 2022-05-23 16:15:02

使 flexbox 项目具有相同的高度

问题描述

1 个解决方案

解决方案1 1 2022-05-23 16:15:02

解决方案1
1 2022-05-23 16:15:02