html - Flexbox child ，行和列的混合

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 demo

工作原理

• 当屏幕小于或等于 500 像素时，媒体查询开始。
• order属性设置屏幕上元素的顺序。所有元素的默认值为 0。
• 与 flex-wrap: wrap在容器上， flex 元素现在可以包装。
• 与 flex-grow设置为正整数，则不需要 flex-basis准确地说。由于 flex-grow 将占用行上的可用空间，因此 flex-basis 只需要足够大以强制换行。
• 如果首选精确的 flex-basis 值，则需要考虑任何边框、填充和边距，可能使用 box-sizing: border-box 和/或 计算 ( example )。