Question

我使用CSS网格创建了6个按钮（它们是简单的div，具有固定的width和height）。

我的布局应具有响应性，因此，如果六个按钮的容器宽度足够大以包含一行中的所有按钮，那么如果容器宽度不够大而不能包含所有按钮，则所有按钮应位于同一行中所有六个按钮，则该按钮应位于两行上：前三个按钮应位于第一行上，最后三个按钮应位于第二行上。

我该怎么做？

现在我使用此代码（也在Codepen中）：

.container {
  border: 1px solid black;
  width: 100%;
}

.section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid black;
}

.button {
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;  
  align-items: center;      
  justify-content: center; 
  border: 1px solid black;
  margin-left: .5rem; 
  margin-right: .5rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: #f4c242;
  cursor: pointer;
}

.text {
  width: 100%;
  height: 40%;
  display: flex;
  align-items: center;     
  justify-content: center; 
  text-align: center;
  color: black;
}

<div class="container">
  <div class="section">
    
    <div class="button">
      <div class="text">Button 1</div>
    </div>
    
    <div class="button">
      <div class="text">Button 2</div>
    </div>
    
    <div class="button">
      <div class="text">Button 3</div>
    </div>
    
    <div class="button">
      <div class="text">Button 4</div>
    </div>
    
    <div class="button">
      <div class="text">Button 5</div>
    </div>
    
    <div class="button">
      <div class="text">Button 6</div>
    </div>
    
  </div>
</div>

如您所见，使用此代码，有些情况不是我想要的，例如：

在这些情况下，按钮应为：

因此，我希望仅以两种可能的方式放置按钮：要么全部放在一行上，要么在一行上的前3个，在另一行上的最后3个。通过这种方式：

Answer 1

选中它，它将按照您的要求运行。

null

Answer 2

更改一些HTML和CSS

<div class="container">
<div class="section">
    <div class="block">
        <div class="button">
            <div class="text">Button 1</div>
        </div>
        <div class="button">
            <div class="text">Button 2</div>
        </div>
        <div class="button">
            <div class="text">Button 3</div>
        </div>
    </div>
    <div class="block">
        <div class="button">
            <div class="text">Button 4</div>
        </div>
        <div class="button">
            <div class="text">Button 5</div>
        </div>
        <div class="button">
            <div class="text">Button 6</div>
        </div>
    </div>
</div>

CSS

.section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid black;
}

.button {
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;  
  align-items: center;      
  justify-content: center; 
  border: 1px solid black;
  margin-left: .5rem; 
  margin-right: .5rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: #f4c242;
  cursor: pointer;
}
/*Add This CSS*/
.block{
  display:flex;
}
.text {
  width: 100%;
  height: 40%;
  display: flex;
  align-items: center;     
  justify-content: center; 
  text-align: center;
  color: black;
}

https://codepen.io/anon/pen/LoKdxL?editors=1100

确保所有六个按钮都在一行上，或者三个在一行上，三个在另一行上

2 个答案: