Flex-Flow - 将第 2 列折叠在第 1 列下，将第 4 列折叠在第 3 列下

Question

我正在使用 flexbox 创建一个 table 在 3 种屏幕尺寸上显示不同的内容。

我正在努力研究如何实现中型视图，方法是折叠第 1 列下的第 2 列和第 3 列下的第 4 列，以实现如下所示的布局。

我认为 flex-flow: column wrap 应该可以工作，但我无法让它工作。有人有什么建议吗？

（还意识到在将数组拉入 flexbox 之前使用 JS 手动将数组分成两半对我来说有点乱。我从两个数组 2021 和 2022 开始并将它们分成两半，但可能有更好的方法这样做的方式）

大宽度桌面（4 列）

2020  |       | 2021  |       |
a.    | g.    | a.    | g.    |
b.    | h.    | b.    | h.    |
c.    | i.    | c.    | i.    |
d.    | j.    | d.    | j.    |
e.    | k.    | e.    | k.    |
f.    | l.    | f.    | l.    |
etc   | etc   | etc   | etc   |

中型（折叠成 2 列）

2020  | 2021  |
a.    | a.    |
b.    | b.    |
c.    | c.    |
d.    | d.    |
e.    | e.    |
f.    | f.    |
etc   | etc   |

小（1 列用于移动设备）

2020. | 
a.    | 
b.    | 
c.    |
d.    | 
e.    | 
f.    | 
etc   | 

2021. |
a.    | 
b.    | 
c.    |
d.    | 
e.    | 
f.    | 
etc   |

当前 html

<div className="flexEven">
    <div className="graduateYearColumn">
        <h1 className="yearTitle">2020.</h1>
        {firstHalfTwentyTwenty.map(person => {
            return (
                <div>
                    <h3 className="graduateName">{person.artist}</h3> 
                    <h3 className="graduateEmail">{person.email}</h3>    
                </div>
            )
        })}
    </div>
    <div className="graduateYearColumn bottom">
        {secondHalfTwentyTwenty.map(person => {
            return (
                <div>
                    <h3 className="graduateName">{person.artist}</h3> 
                    <h3 className="graduateEmail">{person.email}</h3>    
                </div>
            )
        })}
    </div>
    <div className="graduateYearColumn">
        <h1 className="yearTitle">2021.</h1>
        {firstHalfTwentyTwentyOne.map(person => {
            return (
                <div>
                    <h2 className="graduateName">{person.artist}</h2>
                    <h3 className="graduateEmail">{person.email}</h3>
                </div>
            )
        })}
    </div>
    <div className="graduateYearColumn bottom">
        {secondHalfTwentyTwentyOne.map(person => {
            return (
                <div>
                    <h2 className="graduateName">{person.artist}</h2>
                    <h3 className="graduateEmail">{person.email}</h3>
                </div>
            )
        })}
    </div>
</div>

Answer 1

你只需要根据视口应用flex-direction

body {
  background-color: brown;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.child {
  padding: .25rem;
  background-color: antiquewhite;
  margin: .25rem;
  border-radius: 8px;
}


/* MEDIUM DEVICES */

@media only screen and (min-width: 768px) {
  body {
    background-color: blueviolet;
  }
  .wrapper {
    flex-direction: row;
  }
  .parent-container {
    flex: 1;
  }
}


/* LARGE DEVICES */

@media only screen and (min-width: 992px) {
  body {
    background-color: orange;
  }
  .parent-container {
    display: flex;
  }
  .child-container {
    flex: 1;
  }
  .child-container+.child-container {
    margin-top: 2.65rem;
  }
}

<div class="wrapper">
  <div class="parent-container">
    <div class="child-container">
      <h2>2020</h2>
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
    <div class="child-container">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
  </div>
  <div class="parent-container">
    <div class="child-container">
      <h2>2020</h2>
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
    <div class="child-container">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
  </div>
</div>

Flex-Flow - 将第 2 列折叠在第 1 列下，将第 4 列折叠在第 3 列下

Flex-Flow - folding 2nd column under 1st, and 4th column under 3rd

css

flexbox

react-flexbox-grid