Flexbox：重新排序和堆叠列 [英] Flexbox: reorder and stack columns

问题描述

当前的顺序是两个宽度为1/4的列，其中一个为1 / 2之间的宽度。

我想将两个宽度为1/4的列变成1/2宽度，并在开始时将它们堆叠在一起。

我可以使用浮动复制它，但不能找出使用flexbox的方式。

我挣扎着将两个1/4宽度的列堆叠起来，同时占据父宽度的50％。

这是小提琴。

  .col1of2 {width：50％; background：red;}。col1of4 {width：25％; col：container; display：flex;} @ media all和（max-width：1000px）{.col1of2 {order：3; } .col1of4 {order：1; }} / * css的工作示例* /。ex1of2 {width：50％;背景：红色; float：right;}。ex1of4 {display：inline-block;宽度：50％;背景：黄色;}。ex1of4  -  last {background：blue;}  

 < H4>我拥有< / H4>< div class =col-container> < div class =col col1of4> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < / DIV> < div class =col col1of2> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < / DIV> < div class =col col1of4 col1of4  -  last> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < / div>< / div><！ - 我想让它看起来像是什么时候交换的 - >< H4>我想要实现的< / H4>< div class =ex-容器> < div class =ex ex1of4> < div class =ex__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =ex__inner> sssadksadkaslkslasasldkasddsa< / div> < / DIV> < div class =ex ex1of2> < div class =ex__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =ex__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =ex__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =ex__inner> sssadksadkaslkslasasldkasddsa< / div> < / DIV> < div class =ex ex1of4 ex1of4  -  last> < div class =ex__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =ex__inner> sssadksadkaslkslasasldkasddsa< / div> < / div>< / div>  

解决方案

这个布局的关键是将flex容器切换到媒体查询中的列换行。

  .col-container {display：flex;}。col1of2 {width：50％; background：red;}。col1of4 {width：25％;背景：黄色;}。col1of4  -  last {background：blue;} @ media all和（max-width：1000px）{.col-container {flex-direction：column; flex-wrap：wrap; height：100px; } .col1of2 {order：1; } .col1of4 {width：50％; }  

< div class =col-container > < div class =col col1of4> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < / DIV> < div class =col col1of2> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < / DIV> < div class =col col1of4 col1of4 - last> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < div class =col__inner> sssadksadkaslkslasasldkasddsa< / div> < / div>< / div>

$ b

修正小提琴

I have three columns, which I want to swap the order of at a certain screen size.

The current order is two 1/4 width columns with a 1/2 width in between.

I want to make the two 1/4 width columns into 1/2 widths, and stack them at the beginning.

I can replicate it using floats, but can't figure out a way using flexbox.

I'm struggling to get the two 1/4 width columns to stack whilst being 50% of the parent width.

Here is a fiddle.

.col1of2 {
  width: 50%;
  background: red;
}
.col1of4 {
  width: 25%;
  background: yellow;
}
.col1of4--last {
  background: blue;
}
.col-container {
  display: flex;
}
@media all and (max-width: 1000px) {
  .col1of2 {
    order: 3;
  }
  .col1of4 {
    order: 1;
  }
}
/* css for working example */

.ex1of2 {
  width: 50%;
  background: red;
  float: right;
}
.ex1of4 {
  display: inline-block;
  width: 50%;
  background: yellow;
}
.ex1of4--last {
  background: blue;
}

<H4>what i have</H4>
<div class="col-container">
  <div class="col col1of4">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of2">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of4 col1of4--last">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
</div>

<!-- what i want it to look like when it swaps -->

<H4>what i want to achieve</H4>
<div class="ex-container">
  <div class="ex ex1of4">
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="ex ex1of2">
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="ex ex1of4 ex1of4--last">
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
</div>

解决方案

The key to this layout is switching the flex container to column wrap in the media query.

You also have to define a height for the container, so the items know where to wrap.

.col-container {
  display: flex;
}
.col1of2 {
  width: 50%;
  background: red;
}
.col1of4 {
  width: 25%;
  background: yellow;
}
.col1of4--last {
  background: blue;
}
@media all and (max-width: 1000px) {
  .col-container {
    flex-direction: column;
    flex-wrap: wrap;
    height: 100px;
  }
  .col1of2 {
    order: 1;
  }
  .col1of4 {
    width: 50%;
  }
}

<div class="col-container">
  <div class="col col1of4">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of2">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of4 col1of4--last">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
</div>

revised fiddle

这篇关于Flexbox：重新排序和堆叠列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！