Question

我正在尝试实现一个CSS“卡片模板”，当第一个项目具有一定宽度时，需要两个项目的flexbox包装最后一个项目。为了使事情复杂化，最后一项的宽度可以可变。当您查看下面的JFiddle时，这更有意义。绿色框是第一个项目，红色框是最后一个项目。当用户将窗口大小更改为绿色框达到300px的宽度时，红色框需要换行到下一行。我尝试将flex-wrap与min-width结合使用，但这并不能解决问题。任何帮助表示赞赏。

https://jsfiddle.net/burtonrhodes/tu4wgc3m/41/

下面是卡片模板的示例

<div class="afs-card">

  <div class="afs-card-checkbox">
    <input type="checkbox" />
  </div>

  <div class="afs-card-icon">
    X
  </div>

  <!-- this div should expand to fill the space -->
  <div class="afs-card-info">

    <!-- this item should exapnd to fill the space -->
    <div class="afs-card-content">
      <div class="afs-card-description">
        This is the content for the card. When adjusting the screen, if this box is
        <=3 00px;, then the red box should wrap to the next line. </div>
          <div class="afs-card-sub-description">
            This is a sub text for the card
          </div>
      </div>

      <!-- this div will be a certain width based off child width properties 
            and should go to next line if afs-content's width is <= 300px -->
      <div class="afs-card-details">
        <!-- no wrapping of these items should occur -->
        <div style="width: 80px">
          10/15/2005
        </div>
        <div style="width: 20px">
          X
        </div>
        <div style="width: 70px">
          More
        </div>
      </div>

    </div>

    <div class="afs-card-menu">
      ...
    </div>

    <div class="afs-card-drag-handle">
      ==
    </div>
  </div>

Answer 1

您可以这样做，而无需媒体查询：

SELECT
    CASE WHEN a.known = true THEN ‘value1’
         WHEN a.known = true AND b.known = true THEN ‘value2’
         WHEN a.known = true AND b.known = false THEN ‘value3’
         WHEN a.known = true AND b.known = false AND b.aca=true THEN ‘value4’
    END AS ‘Column1’,
    COUNT(distinct a.abc) AS ‘Column2’
FROM a
JOIN b ON a.id = b.id
GROUP BY Column1

设置要包装的容器
设置内容以填充可用空间
设置内容的最小宽度以确保最终将强制换行
flex-basis在任何弹性空间分布之前设置元素的宽度，因此将其设置为行空间小于第二个元素的宽度可以防止它总是包装第二个元素

提琴：https://jsfiddle.net/z91j04rh/4/

Answer 2

您可以使用flex-basis和flex-grow来实现。使用以下命令更新您的CSS：

// Your wrapper
.afs-card-info {
  display: flex;
  width: 100%;
  border: 1px solid;
  flex-wrap: wrap;
}
// Your left container
.afs-card-content {
  padding: 1px 10px;
  border: green 2px solid;
  flex-basis: 300px;
  flex-grow: 1;
}

Answer 3

将此代码行放置在您要对其应用300px最小宽度的CSS上方

@media only screen and (min-width: 300px) {
   #elementid {
    --css here--
}
}

当项目处于特定宽度时包装元素

3 个答案: