Question

我正在创建一个响应式网站。有多个框（块）。所有这些框都包含三个项目（跨度），现在，它们之间的空间由flexbox（空格间隔）平均分配，如下所示：

|-----------------------------|
|                             |
| Item1      Item2      Item3 |
|                             |
|-----------------------------|

容器根据屏幕大小调整大小。现在，如果容器盒太小，它们会像这样包装：

|------------------|
|                  |
| Item1      Item2 |
| Item3            |
|                  |
|------------------|

是否有一种无媒体查询的方式来实现这一点？

|-----------------------------|
|                             |
| Item1                       |
| Item2                       |
| Item3                       |
|                             |
|-----------------------------|

目前的代码如下：

<div class="project-details">
    <span>Title 1 <span>Content 1</span></span>
    <span>Title 2 <span>Content 2</span></span>
    <span>Title 3 <span>Content 3</span></span>
</div>

CSS的重要部分：

.project-details {
  width: 100%;
  display: flex;
  justify-content: space-between;
    flex-wrap: wrap;
  border: 1px solid black;
}
.project-details > span {
  font-weight: bold;
}
.project-details > span > span {
  font-weight: normal;
}

您可以在https://codepen.io/BuenaJormax/pen/grVAGk

进行游戏

Answer 1

接近这种类型的流体布局的东西可以在没有弯曲的情况下完成，例如使用浮子，但更漂亮。

Fiddle with text content and variable height.

HTML

<div class="flex">

  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
  <div> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</div>

CSS

body{
  font-family: tahoma, arial;
}

.flex {
  margin: 0;
  width: 100%;
  /* width needed for Firefox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex-wrap: wrap;
  -moz-box-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex-direction: row;
  -moz-box-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.flex > div {
  /* % = flex-glow, flex-shrink, flex initial width  */
  -moz-box-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;

  height: auto;
  width: 100px;
  background-color: #e2e2e2;
  color: #222222;
  margin: 10px;
  padding: 10px;
}

Flexbox：如何为所有项目创建一行，或为每个项目创建一行

1 个答案: