使 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