Flexbox children，行列混合

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>

但我对如何将 child 元素 "two" 和 "three" 分解成它们自己的行感到困惑。然后如何使元素 "one" 和 "four" 在各自的行上各占 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

您可以将 "three" 和 "two" 分组到它们自己的弹性框中，然后使用 flex-wrap 来实现。

这是一个 JSFiddle：https://jsfiddle.net/zw10dzzn/3/

您可能需要调整边距和顺序以获得您想要的布局。

.flex-container {
    display: flex;
    align-items: flex-start;
    width: 90%;
    margin: 0 auto;
    background: red;
    flex-wrap: wrap; /* allow elements to wrap in mobile view */
}

.flex-container .one, 
.flex-container .two-and-three, 
.flex-container .four {
    background-color: magenta;
}

.flex-container .one, 
.flex-container .four {
    height: 100px;
    margin: 3px;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
}

.flex-container .two-and-three {
    order: 1;
    display: flex;
    flex: 0 1 100%;
    flex-wrap: wrap;
}

.flex-container .two-and-three .two, 
.flex-container .two-and-three .three {
    background-color: #FC0;
    flex: 1 0 100%;
    margin: 3px;
    height: 100px;
}

.flex-container .two-and-three .two {
    order: 2;
}

.flex-container .two-and-three .three {
    order: 1;
}

.flex-container .one {
    order: 3;
}

.flex-container .four {
    order: 4;
}

@media (min-width: 768px) {
    
    .flex-container {
        flex-wrap: nowrap; /* back to single row */
    }
    
    .flex-container .two-and-three {
        flex-grow: 4;
        flex-basis: auto; /* stop spanning the whole row */
        flex-wrap: nowrap; /* back to single row */
    }
    
    .flex-container .two-and-three .two,
    .flex-container .two-and-three .three {
        flex-basis: 50%;
    }
    
    .flex-container .two-and-three .two {
        order: 1;
    }

    .flex-container .two-and-three .three {
        order: 2;
    }
    
    .flex-container .one {
        order: 1;
    }
    
    .flex-container .four {
        order: 4;
    }

}

<div class="flex-container">
    <div class="one">one</div>
    <div class="two-and-three">
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
    <div class="four">four</div>
</div>

Answer 2

仅使用 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-grow set to a positive integer, there's no need for flex-basis。由于 flex-grow 将消耗行上的空闲 space，因此 flex-basis 只需要足够大以强制换行。
如果首选精确的 flex-basis 值，则需要考虑任何边框、填充和边距，可能使用 box-sizing: border-box and/or calc (example).

Flexbox children，行列混合

Flexbox children, mix of rows and columns

html

css

flexbox