使 flexbox 项目具有相同的高度

Question

我正在学习如何使用 Flexbox，但我无法让我的盒子做我想做的事。 我想：

一排四个盒子，中间有一个小间隙
每个盒子的尺寸应该完全相同
框内的文本应水平和垂直居中，并带有大量填充
每个框都应该是一个链接，并且整个框都应该是可点击的； 不仅仅是文字

我面临的主要问题是，当一个文本比其他文本多时，这些框的大小不同。 尽管父元素具有 align-items:stretch 属性，但我认为应该纠正该属性，但仍会发生这种情况。

谢谢你的帮助。 这是我的代码：

<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

我在那里添加了随机文本，以确保它会增加高度，并且仍然以文本为中心。

所以基本上，我所做的就是使用你所做的和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