Question

HTML：

<div class="flex">
  <span>One</span>
  <span>two</span>
  <span>three</span>
  <span class="four">four</span>
  <span>five</span>
</div>

CSS：

.flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
span {
  background: #999;
  margin-top:10px;
}
.four {
  background: #FFFF00;
}

基本上标题是这样的 - 我如何在一行中内联.four和.five spans？它甚至可能吗？有什么想法吗？

https://jsfiddle.net/erghcuhw/

Answer 1

您必须使用flex-direction: row然后在flex-container上设置flex-wrap: wrap，并在除第4和第5之外的所有范围设置flex: 0 0 100%。

＆＃13;

.flex {
  display: flex;
  flex-wrap: wrap;
}
span {
  background: #999;
  margin-top:10px;
  flex: 0 0 100%;
}
span:nth-child(4),
span:nth-child(5) {
  flex: 0 0 50%;
}
.four {
   background: #FFFF00;
}

＆＃13;

<div class="flex">
  <span>One</span>
  <span>two</span>
  <span>three</span>
  <span class="four">four</span>
  <span>five</span>
</div>

＆＃13;

Answer 2

我试了一下

.flexC {
  display: flex;
  flex-direction: column;
}

.flexR {
  display: flex;
  flex-direction: row;
}

.flexR span {
  width: 50%;
}

span {
  background: #999;
  margin-top: 10px;
}

.four {
  background: #FFFF00;
}

<div class="flexs">
  <div class="flexC">
    <span>One</span>
    <span>two</span>
    <span>three</span>
  </div>
  <div class="flexR">
    <span class="four">four</span>
    <span>five</span>
  </div>
</div>

将flex-direction设置为column，防止flexbox中的换行符

2 个答案: