时间戳

首页 > 解决方案 > CSS“如果换行则适合宽度的孩子”

html - CSS“如果换行则适合宽度的孩子”

问题描述

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

标签： htmlcssflexbox

解决方案

像这样的东西？我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

推荐阅读