Question

我正在尝试使用flexbox更改某些项目的order。我有一个问题，但是因为其中一个我要改变顺序的项目是在一个新的div中，所以它不是同一个父项的直接子项，而是其他项目。

<div class="wrapper">
  <div class="something">
    <img src=""></img>
    <p>PARAGRAHP</p>
  </div>
  <h1>TITLE</h1>
  <h4>SUBTITLE</h4>
</div>

我正试图将标题和副标题下面的段落移动，我在这里制作了一个编写代码http://codepen.io/anon/pen/BjYmZX

有没有办法实现这个目标？

Answer 1

order属性控制同一容器中flex项目的重新排序。

在您的加价中，.something是一个弹性项目，还有兄弟姐妹h1和h4。 .something的孩子在不同的容器中，因此不能与父母和叔叔一起重新订购。

如果不一定要将图像和段落放在不同的容器中，只需将它们放在主容器中即可。然后你可以随意订购一切。

以下是一个例子：

.wrapper {
  text-align:center;
  display:flex;
  flex-direction: column;
}

img {
  height: 300px;
  align-self: center;
}

p {
  order:3;
}

h1 {
  order:1;
}

h4 {
  order:2;
}

<div class="wrapper">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Puffer_Fish_DSC01257.JPG/1280px-Puffer_Fish_DSC01257.JPG"></img>
  <p>ICONS HERE</p>
  <h1>TITLE</h1>
  <h4>SUBTITLE</h4>
</div>

Revised Codepen

Answer 2

对于这种重新排序，显示表属性应该有所帮助：

＆＃13;

img {
  height: 300px;
}

.wrapper {
  text-align: center;
  display: table;
  margin: auto;
}

.something {
  display: table-row;
}

p {
  display: table-footer-group;
}

h1 {
  display: table-caption
}

h4 {
  display: table-header-group;
}

* {
  margin: 0
}

＆＃13;

<div class="wrapper">
  <div class="something">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Puffer_Fish_DSC01257.JPG/1280px-Puffer_Fish_DSC01257.JPG" />
    <p> ICONS HERE </p>
  </div>
  <h1>TITLE</h1>
  <h4>SUBTITLE</h4>
</div>

＆＃13;

但是也许，它可能会将html中的内容设置为正确的顺序：）

Flexbox在不同的div中订购？

2 个答案: