文章/答案/技术大牛

发布

社区首页 >问答首页 >项目在一定宽度时包装元素。

问项目在一定宽度时包装元素。
EN

Stack Overflow用户

提问于 2019-12-03 04:19:25

回答 3查看 855关注 0票数 0

我正在尝试实现一个CSS“卡片模板”，当第一个项目在一定宽度时，一个需要包装最后一个项目的2项柔性盒。更复杂的是，最后一项的宽度可以是可变的。当您查看下面的JFiddle时，这就更有意义了。绿色框是第一项，红色框是最后一项。当用户将窗口大小更改为绿色框宽度达到300 of时，红色框需要换到下一行。我试过用弹性包装和最小宽度相结合，但这并不管用。任何帮助都是非常感谢的。

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>

html

css

flexbox

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-12-03 04:49:20

您可以使用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;
}

票数 0

Stack Overflow用户

发布于 2019-12-03 04:48:37

您可以这样做，不需要媒体查询：

  .afs-card-info {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid;

    .afs-card-content {
      flex-grow: 1;
      min-width: 300px;
      flex-basis: calc(100% - 176px);

eventually

flex-basis将容器设置为包装

，设置内容以填充可用空间

设置的内容最小宽度，以确保它将强制包装

在任何弹性空间分布之前设置元素宽度，因此将其设置为行空间减去第二个元素宽度会阻止其始终包装第二个元素

。

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

票数 0

Stack Overflow用户

发布于 2019-12-03 04:36:04

将这一行代码置于要应用300 to最小宽度的css之上。

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59150142

复制

相似问题

问项目在一定宽度时包装元素。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问项目在一定宽度时包装元素。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问项目在一定宽度时包装元素。
EN