Flexbox儿童，行和列的混合

Question

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

然后我想像移动电话这样打破这个：

我已成功重新排序元素：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我仍然坚持如何打破儿童元素＆＃34;两个＆＃34;和＆＃34;三＆＃34;进入自己的行。然后如何制作元素＆＃34; one＆＃34;和＆＃34;四＆＃34;每行50％宽。

如果没有额外的HTML标记，我是否正在努力做到这一点？谢谢你的建议。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只有使用flexbox才能通过CSS实现桌面移动转换。

HTML中无需进行任何更改。

＆＃13;

＆＃13;

.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%;  }

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle demo

工作原理

• 当屏幕为500px或更低时，媒体查询会启动。
• order属性设置屏幕上项目的顺序。所有项目的默认值均为0.
• 在容器上使用flex-wrap: wrap，flex项目现在可以换行。
• 将flex-grow设置为正整数，flex-basis无需精确。由于flex-grow会消耗行上的可用空间，flex-basis只需要足够大以强制换行。
• 如果首选精确的flex-basis值，则需要考虑任何边框，填充和边距，可能使用box-sizing: border-box和/或calc（example）

Answer 2

你可以分组＆＃34;三＆＃34;和＆＃34;两个＆＃34;进入他们自己的弹性框并使用flex-wrap来实现这一点。

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

您可能需要使用边距和顺序来获得所需的布局。

＆＃13;

＆＃13;

.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;
    }

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;