如何从flex计算中排除div(flex项)?

时间:2016-05-04 08:47:16

标签: css flexbox

我有一个我无法修改的html布局,因为它是一个3d派对库。

我有四个div,我希望它们在这样的Flexbox中:

1 ------ 2 ------ 3

(其中2位于中心,4位根本不可见)。

我创建了一个示例here

似乎它主要起作用,因为我想除了最后一个div弄乱项目编号2的中心位置的事实。有没有办法我可以通过css完全“排除”它从flex数组中虽然是在HTML?

.fc-toolbar {
	background-color: #7CC2DD;
	color: white;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fc-left {
	order: 0;	
}

.fc-right {
	order: 2;
}

.fc-center {
	order: 1;
}

.fc-clear {

}
<div class="fc-toolbar">
  <div class="fc-left">
    <button type="button">
      <
    </button></div>
  <div class="fc-right">
    <button type="button">
          >
    </button>
  </div>

  <div class="fc-center">
    <h2>May 2016</h2>
  </div>
  <div class="fc-clear"></div>
</div>

1 个答案:

答案 0 :(得分:3)

你可以给元素<Persons> <Person ID="1"> <Name></Name> ... </Person> <Person ID="2"> <Name></Name> ... </Person> ... </Persons> ,它将被取出流程,就像你对非flex元素一样。

您可以找到更新的jsfiddle here