Question

我想在没有JavaScript的情况下实现的效果是，将四个按钮排列成2x2矩阵，只要它们的所有内容都适合单元格即可。当它们中的任何一个太长而无法容纳时，应将其包装成1x4矩阵，所有像元都具有完整宽度。我目前能想到的最好的是下面的代码片段。直到包裹后单元格应具有完整宽度为止，一切都很好。

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    
    border: 1px solid red;
    }

.flex-item {
    flex: 0 1 auto;
    align-self: auto;
    min-width: 40%;
    max-width: 100%;
    text-align: center;
    
    padding: 10px;
    border: 1px solid blue;
    margin: 5px;
    }

<div class="flex-container">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div>

<div class="flex-container" style="width: 280px; margin-top: 2em;">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div>

<div class="flex-container" style="width: 150px; margin-top: 2em;">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div

Answer 1

像这样？我为flex:1;做了.flex-item

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    
    border: 1px solid red;
    }

.flex-item {
    flex:1;
    align-self: auto;
    min-width: 40%;
    max-width: 100%;
    text-align: center;
    
    padding: 10px;
    border: 1px solid blue;
    margin: 5px;
    }

<div class="flex-container">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div>

<div class="flex-container" style="width: 280px; margin-top: 2em;">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div>

<div class="flex-container" style="width: 150px; margin-top: 2em;">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div

CSS“如果自动换行，则为宽度适合的孩子”

1 个答案: