设计一组 5 个 div 以使它们在大屏幕上均匀分布并在小屏幕上分成两行？

Question

我有一个由5个方形div组成的组件，需要满足以下要求：

• 在大屏幕上，我只希望它们在一行中等距分布
• 当屏幕较大时，应全部大小相同
• 在较小的屏幕上，2 个必须在顶部，3 个必须在底部
• 在较小的屏幕上，两条线需要具有相同的大小，因此顶部的正方形可以更大

我正在尝试使用 flexbox 进行此操作，但无法正确定位。这是我所拥有的示例：

const App = () => {

  return (
    <div className='container'>
      <div className='square-group'>
        <div className='square'>Content 1</div>
        <div className='square'>Content 2</div>
      </div>
      <div className='square-group'>
        <div className='square'>Content 3333</div>
        <div className='square'>Content 44</div>
        <div className='square'>Content 5</div>
      </div>
    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; 
  flex-wrap: wrap;
}

.square-group {
  display: flex;
  justify-content: space-evenly;
}

.square {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 5px 9px;
    height: 50px;
  background-color: blue;
  margin: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

对于这个示例，有几个问题不符合我的要求：

• 在一行中时，所有方块需要具有相同的大小和彼此之间的距离，无论其内容如何。
• 在单独的行中，我希望它们横跨屏幕而不是居中，并且两条线的宽度必须相等

我该如何解决这个问题？

Answer 1

你可以去掉多余的包装器，如下所示：

const App = () => {

  return (
    <div className='container'>
        <div className='square'>Content 1</div>
        <div className='square'>Content 2</div>
        <div className='square'>Content 3333</div>
        <div className='square'>Content 44</div>
        <div className='square'>Content 5</div>
    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: flex;
  flex-direction: row;
}

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 9px;
  height: 50px;
  box-sizing:border-box;
  background-color: blue;
  margin: 2px 3%; /* 3% of margin between elements */
  color:#fff;
  min-width:0;
  flex:1; /* eqaul width */
}
@media (max-width:800px) {
  .container {
    flex-wrap:wrap; /* allow the wrap*/
    justify-content:center; /* center everything */
  }
  /* this will seperate both lines*/
  .container::after {
    content:"";
    order:1;
    width:100%;
  }
  /**/
  /* the last 3 elements into the second line */
  .square:nth-child(n + 3) {
     order:2;
     margin:2px;
  }
  
  /* give equal margin on both sides to have equal lines*/
  .square:nth-child(1),
  .square:nth-child(3){
     margin:2px 2px 2px 15%;
  }
  .square:nth-child(2),
  .square:nth-child(5){
     margin:2px 15% 2px 2px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

另一个使用 CSS 网格的想法：

const App = () => {

  return (
    <div className='container'>
        <div className='square'>Content 1</div>
        <div className='square'>Content 2</div>
        <div className='square'>Content 3333</div>
        <div className='square'>Content 44</div>
        <div className='square'>Content 5</div>
    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 9px;
  height: 50px;
  box-sizing:border-box;
  background-color: blue;
  color:#fff;
  margin:0 10%;
}
@media (max-width:800px) {
  .container {
     grid-template-columns:repeat(6,minmax(0,1fr));
     grid-gap:4px;
     max-width:500px;
     margin:auto;
  }
  .square {
     grid-column:span 2;
     margin:0;
  }
  .square:nth-child(-n + 2) {
     grid-column:span 3;
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>