Flexbox儿童,行和列的混合

Question

我正在使用flexbox来连接我的4个元素.

然后,我想像移动设备那样打破这个:

我在这里成功重新排序了元素:

.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  width: 90%;
  margin: 0 auto;
  background: red;
}

.flexcontainer>div {
  height: 100px;
  width: 25%;
  background-color: #E46119;
  border: 1px solid #626262;
  margin: 3px;
}

.flexcontainer>div:nth-of-type(1) {
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  order: 3;
}

.flexcontainer>div:nth-of-type(2) {
  -webkit-flex: 2 0 0;
  flex: 2 0 0;
  order: 2;
}

.flexcontainer>div:nth-of-type(3) {
  -webkit-flex: 2 0 0;
  flex: 2 0 0;
  order: 1;
}

.flexcontainer>div:nth-of-type(4) {
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  order: 4;
}

<div class="flexcontainer">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>

但我坚持如何将子元素"两个"和"三个"分解为自己的行.然后如何在自己的行上制作每个50%宽的元素"一"和"四".

如果没有额外的HTML标记,我正在尝试做什么？谢谢你的建议.

.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  width: 90%;
  margin: 0 auto;
  background: red;
}

.flexcontainer>div {
  height: 100px;
  width: 25%;
  background-color: #E46119;
  border: 1px solid #626262;
  margin: 3px;
}

.flexcontainer>div:nth-of-type(1) {
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
}

.flexcontainer>div:nth-of-type(2) {
  -webkit-flex: 2 0 0;
  flex: 2 0 0;
}

.flexcontainer>div:nth-of-type(3) {
  -webkit-flex: 2 0 0;
  flex: 2 0 0;
}

.flexcontainer>div:nth-of-type(4) {
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
}

<div class="flexcontainer">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>

Answer 1

只使用flexbox可以使用CSS实现桌面 - 移动转换.

HTML中不需要进行任何更改.

.flexcontainer {
  display: flex;
  width: 90%;
  margin: 0 auto;
  background: red;
}

.flexcontainer > div {
  flex: 0 0 25%;
  height: 100px;
  background-color: #E46119;
  border: 1px solid #626262;
  margin: 3px;
}

.flexcontainer > div:nth-of-type(1) { flex: 1 0 0; }
.flexcontainer > div:nth-of-type(2) { flex: 2 0 0; }
.flexcontainer > div:nth-of-type(3) { flex: 2 0 0; }
.flexcontainer > div:nth-of-type(4) { flex: 1 0 0; }

@media screen and ( max-width: 500px) {
  .flexcontainer { flex-wrap: wrap; }
  .flexcontainer > div:nth-of-type(1) { order: 3; flex-basis: 34%;  }
  .flexcontainer > div:nth-of-type(2) { order: 2; flex-basis: 70%; }
  .flexcontainer > div:nth-of-type(3) { order: 1; flex-basis: 70%; }
  .flexcontainer > div:nth-of-type(4) { order: 4; flex-basis: 34%;  }

}

<div class="flexcontainer">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>

jsFiddle演示

这个怎么运作

• 当屏幕为500px或更低时,媒体查询将启动.
• 该order属性设置屏幕上的项目顺序.所有项目的默认值均为0.
• 随着flex-wrap: wrap在容器上,柔性物品现在可以换.
• 随着flex-grow设置为正整数,没有必要flex-basis要精确.由于flex-grow将占用行上的空闲空间,因此flex-basis只需要足够大以强制换行.
• 如果flex-basis首选精确值,则需要考虑任何边界,填充和边距,可能使用box-sizing: border-box和/或calc(示例).