Flexbox是否可以拥有响应列？

时间：2018-02-16 18:12:43

标签： html css css3 flexbox

我希望在网页中有一个响应性地包裹但在列中受约束的区域。我试图模仿在Microsoft Windows资源管理器中看到的行为 - 右侧窗格以小图标模式显示文件。

Windows行为示例 enter image description here

显示自适应包裹但未限制为列的代码段 

<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      background-color:red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Some Text</div>
    <div class="item">Some Text asdf</div>
    <div class="item">Some Text asdfasdf</div>
    <div class="item">Some Text asdfasdfasdfasdf</div>
    <div class="item">Some Text asdf</div>
    <div class="item">Some Text asdfsd</div>
    <div class="item">Some Text weqrqwerwerqw</div>
    <div class="item">a</div>
    <div class="item">aaa</div>
    <div class="item">aaaaa</div>
    <div class="item">aa</div>
    <div class="item">Some Text</div>
    <div class="item">Some Text</div>
  </div>
</body>
</html>

右侧窗格可以拉大或缩小。列计数仅响应显示适合的列，以便不存在x溢出。右侧窗格中的项目在顶部和左侧对齐。请注意，最后一项位于最左侧的列中，但是在一行中。

我尝试了display:grid，但随后又尝试强制使用多个列。这是没有回应的，这很重要。

这可以使用Flexbox实现吗？这可以通过CSS实现还是需要JavaScript？

3 个答案:

答案 0 :(得分：2)

您正在寻找：

.item {
  flex: 0 0 210px;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}

...其中210px是您想要的项目宽度。 

.container {
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      background-color:red;
      margin: 10px;
      flex: 0 0 210px;
      text-overflow: ellipsis;
      overflow-x: hidden;
      white-space: nowrap;
    }
  <div class="container">
    <div class="item">Some Text</div>
    <div class="item">Some Text asdf</div>
    <div class="item">Some Text asdfasdf</div>
    <div class="item">Some Text asdfasdfasdfasdf</div>
    <div class="item">Some Text asdf</div>
    <div class="item">Some Text asdfsd</div>
    <div class="item">Some Text weqrqwerwerqw this will not wrap...</div>
    <div class="item">a</div>
    <div class="item">aaa</div>
    <div class="item">aaaaa</div>
    <div class="item">aa</div>
    <div class="item">Some Text</div>
    <div class="item">Some Text</div>
  </div>

  • 如果您希望自己的项目增长并填满整个可用宽度，请将flex: 0 0 210px更改为flex: 1 0 210px;。
  • 如果您希望您的商品的宽度不超过固定宽度，请使用max-width属性。

对于记录：第2个片段（在评论中引用），有2个版本。

a）正常的（正确，但在IE10及以下版本无效 - 请参阅flexbug 8）：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: white;
  border: 1px solid #f3f3f3;
  margin: 1px 5px;
  padding: 5px 10px;
  flex: 0 1 100%;
  box-sizing: border-box;
}
@media (min-width: 479px) {
  .item {
    flex-basis: calc(50% - 10px);
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
  }
}
@media (min-width: 768px) {
  .item {
    flex-basis: calc(33.33% - 10px);
  }
}
@media (min-width: 992px) {
  .item {flex-basis: calc(25% - 10px);}
}
@media (min-width: 1200px) {
  .item {flex-basis: calc(20% - 10px);}
}
body {
  background: #f5f5f5;
}
<div class="container">
  <div class="item">Some Text</div>
  <div class="item">Some Text asdf</div>
  <div class="item">Some Text asdfasdf</div>
  <div class="item">Some Text asdfasdfasdfasdf</div>
  <div class="item">Some Text asdf</div>
  <div class="item">Some Text asdfsd</div>
  <div class="item">Some Text weqrqwerwerqw this will not wrap, no matter how long it is.</div>
  <div class="item">a</div>
  <div class="item">aaa</div>
  <div class="item">aaaaa</div>
  <div class="item">aa</div>
  <div class="item">Some Text</div>
  <div class="item">Some Text</div>
</div>

b）f ** - up one （部分不正确 - flex仅用于增长 - 但它适用于IE 10及以下版本）：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: white;
  border: 1px solid #f3f3f3;
  margin: 1px 5px;
  padding: 5px 10px;
  flex: 0 1 100%;
  box-sizing: border-box;
}
@media (min-width: 479px) {
  .item {
    max-width: calc(50% - 10px);
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
  }
}
@media (min-width: 768px) {
  .item {
    max-width: calc(33.33% - 10px);
  }
}
@media (min-width: 992px) {
  .item {max-width: calc(25% - 10px);}
}
@media (min-width: 1200px) {
  .item {max-width: calc(20% - 10px);}
}
body {
  background: #f5f5f5;
}
<div class="container">
  <div class="item">Some Text</div>
  <div class="item">Some Text asdf</div>
  <div class="item">Some Text asdfasdf</div>
  <div class="item">Some Text asdfasdfasdfasdf</div>
  <div class="item">Some Text asdf</div>
  <div class="item">Some Text asdfsd</div>
  <div class="item">Some Text weqrqwerwerqw this will not wrap, no matter how long it is.</div>
  <div class="item">a</div>
  <div class="item">aaa</div>
  <div class="item">aaaaa</div>
  <div class="item">aa</div>
  <div class="item">Some Text</div>
  <div class="item">Some Text</div>
</div>

答案 1 :(得分：0)

只需使用flex-basis属性并在左侧和右侧减去填充大小。使用媒体查询将较低设备的弹性基础增加到50％到100％。

<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      background-color:red;
      flex-basis: calc(33.3333% - 20px);
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Some Text</div>
    <div class="item">Some Text asdf</div>
    <div class="item">Some Text asdfasdf</div>
    <div class="item">Some Text asdfasdfasdfasdf</div>
    <div class="item">Some Text asdf</div>
    <div class="item">Some Text asdfsd</div>
    <div class="item">Some Text weqrqwerwerqw</div>
    <div class="item">a</div>
    <div class="item">aaa</div>
    <div class="item">aaaaa</div>
    <div class="item">aa</div>
    <div class="item">Some Text</div>
    <div class="item">Some Text</div>
  </div>
</body>
</html>

答案 2 :(得分：0)

我们可以使用flex-basis: 33.333%（对于3列），然后使用text-overflow: ellipsis和overflow: hidden以及white-space: nowrap来实现此目的：

enter image description here

像这样：

＆＃13;
＆＃13; 
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: red;
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-right: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
＆＃13; 
<div class="container">
  <div class="item">Some Text</div>
  <div class="item">Some Text asdf</div>
  <div class="item">Some Text asdfasdf</div>
  <div class="item">Some Text asdfasdfasdfasdf</div>
  <div class="item">Some Text asdf</div>
  <div class="item">Some Text asdfsd</div>
  <div class="item">Some Text weqrqwerwerqw</div>
  <div class="item">a</div>
  <div class="item">aaa</div>
  <div class="item">aaaaa</div>
  <div class="item">aa</div>
  <div class="item">Some Text</div>
  <div class="item">Some Text</div>
</div>
＆＃13;
＆＃13;
＆＃13;

或者这是一个响应速度稍快的版本，它会尽可能使用max-width和min-width添加/删除列。这方面的缺点是最后一项（它自己的一行）没有正确的大小。

enter image description here

＆＃13;
＆＃13; 
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.item {
  background-color: red;
  flex-grow: 1;
  max-width: 300px;
  min-width: 150px;
  flex-basis: 33.333%;
  box-sizing: border-box;
  padding-right: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
＆＃13; 
<div class="container">
  <div class="item">Some Text</div>
  <div class="item">Some Text asdf</div>
  <div class="item">Some Text asdfasdf</div>
  <div class="item">Some Text asdfasdfasdfasdf</div>
  <div class="item">Some Text asdf</div>
  <div class="item">Some Text asdfsd</div>
  <div class="item">Some Text weqrqwerwerqw</div>
  <div class="item">a</div>
  <div class="item">aaa</div>
  <div class="item">aaaaa</div>
  <div class="item">aa</div>
  <div class="item">Some Text</div>
  <div class="item">Some Text Text Text Text Text</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题