代码之家 › 专栏 › 技术社区 › ZorgoZ

CSS“如果包裹,则适合宽度子项”

css

ZorgoZ · 技术社区 · 7 年前

我试图在没有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

1 回复 | 直到 7 年前

doğukan 7 年前

像这样的?我做了 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