Question

我需要创建以下结构：

Rcpp

里面有5件物品。它们都垂直对齐到中间。 3个第一个元素向左拉，最后2个元素向右拉。

我知道我可以使用花车，但它有几个缺点，包括麻烦的垂直对齐。

我决定使用flexbox，结果更方便灵活。此外，它更具响应性。

现在我的问题是，我可以在flexbox中分发这样的元素吗？理想情况下，这5个元素中的每一个都是flexbox项目。但是我如何告诉flexbox将那些3拉向左边，将那些2拉到右边？我认为添加空元素来填充空间不是最好的主意。

这是可行的还是我需要像这样做？

|                                         |
| [item][item][item]          [item][item]|
|                                         |

每个项目中是否包含所需的元素，或者甚至可能是单独的flexbox？

Answer 1

将display: flex与margin-left: auto一起用于4 ^th子元素

<main>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
</main>

的CSS

main {
  display: flex; 
}

div {
   width: 12%;
   margin: 0 10px;
   border: 1px red solid;
}

div:nth-child(4) {
  margin-left: auto;
}

Codepen ：http://codepen.io/anon/pen/wKvMOw

输出：

Answer 2

或者你可以坚持使用Flexbox布局并让flex支架完成所有魔术。就个人而言，我不喜欢在弹性框布局中设置边距（margin:0;除外），它可以抛弃布局并生成不需要的滚动条。

<div class="rowNoWrap">
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
</div>

.rowNoWrap {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    -o-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.flexyChild {
    flex: 1;
}
.flexyChild:nth-child(4) {
    flex: 5;
    text-align: right;
    padding-right: 2%;
}

给你这个布局：

jsFiddle here

Answer 3

我只是想添加另一种方法来实现flexbox。没有边距，填充，边框或特殊选择器。我添加了2个额外的元素，以便将主要的flex容器（.main）与2个嵌套的flex容器（.sub.left和.sub.right）分开。

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: 400 16px/1.45 Consolas;
  list-style: none;
}
body {
  color: white;
  background: black;
}
.main {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  outline: 2px dashed yellow;
}
.node {
  outline: 4px solid red;
  font-size: .9rem;
  text-align: center;
  width: 20%;
}
.sub {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 50%;
  outline: 3px dotted lime;
}
.left {
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.right {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.msg {
  font-size: .9rem;
  margin-top: 5%;
}
.ylw {
  color: yellow;
}
.grn {
  color: lime;
}
.red {
  color: red;
}

<nav class="main">
  <ul class="sub left">
    <li class="node">[ item ]</li>
    <li class="node">[ item ]</li>
    <li class="node">[ item ]</li>
  </ul>
  <ul class="sub right">
    <li class="node">[ item ]</li>
    <li class="node">[ item ]</li>
  </ul>
</nav>
<p class="msg"><span class="ylw">Yellow</span> = .main
  <br/><span class="grn">Green</span> = .sub
  <br/><span class="red">Red</span> = .node

我可以在flexbox中拉物品吗？

3 个答案: