1

我正在使用 flexbox 创建一个表格，该表格将在 3 种屏幕尺寸上以不同的方式显示。

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

我认为 flex-flow: column wrap 应该可以工作，但我无法让它工作。有没有人有任何提示？

（也意识到在将数组拉入弹性盒之前使用 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>
4

1 回答 1

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

于 2021-07-15T12:14:16.837 回答