Question

我正在使用flexbox创建一组需要居中且均匀分组的按钮（此示例每行3个）。但是，我的选择似乎是将它们分组，但允许通过添加到子级来增加宽度：

flex: 0 0 20%

或保持其静态宽度，并允许flex-wrap根据屏幕大小更改其位置。有办法允许两者都允许吗？即对于大尺寸的屏幕，有2组3个按钮，并允许对较小的屏幕进行适当的包装，但始终保持静态宽度吗？

    .parent {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    
    .child{
      text-decoration: none !important;
      display: inline-block;
      width: 160px;
      height: 140px;
      padding-top: 10px;
      margin: 30px 30px 30px 30px;
      border-radius: 30px;
      border: 1px solid #003595;
    }

<div class="parent">
  <a class="child" href="blah">
      <i class="fa fa-broadcast-tower fa-5x"></i>
      <span>Button 1</span>
  </a>
  <a class="child" href="blah">
      <i class="fa fa-chart-line fa-5x"></i>
      <span>Button 2</span>  
  </a>
  <a class="child" href="blah">
      <i class="fa fa-address-card fa-5x"></i>
      <span>Button 3</span>
  </a>                    
  <a class="child" href="blah">
      <i class="fa fa-clipboard-list fa-5x"></i>
      <span>Button 4</span>
  </a>
  <a class="child" href="blah">
      <i class="fa fa-signal fa-5x"></i>
      <span>Button 5</span>
  </a>
  <a class="child" href="blah">
      <i class="fa fa-signal fa-5x"></i>
      <span>Button 6</span>
  </a>
</div>

这是一个fiddle，用于显示/播放调整后的大小。

Answer 1

您说您需要将按钮居中，那么如何将max-width添加到父对象，然后将所有内容都以margin: auto和justify-content: center居中呢？这样，它也可以正确包裹在较小的屏幕上：

.parent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    max-width: 700px;
    margin: auto;
    justify-content: center;
}

https://jsfiddle.net/ms1t8xry/9/

Answer 2

CSS-Grid 可以做到

Codepen Demo

body {
  text-align: center;
}

.parent {
  display: inline-grid;
  grid-gap: 1em;
  grid-template-columns: repeat(3, 1fr);
}

.child {
  text-decoration: none !important;
  width: 160px;
  height: 140px;
  padding-top: 10px;
  border-radius: 30px;
  border: 1px solid #003595;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="parent">
  <a class="child" href="blah">
    <i class="fa fa-broadcast-tower fa-5x"></i>
    <span>Button 1</span>
  </a>
  <a class="child" href="blah">
    <i class="fa fa-chart-line fa-5x"></i>
    <span>Button 2</span>
  </a>
  <a class="child" href="blah">
    <i class="fa fa-address-card fa-5x"></i>
    <span>Button 3</span>
  </a>
  <a class="child" href="blah">
    <i class="fa fa-clipboard-list fa-5x"></i>
    <span>Button 4</span>
  </a>
  <a class="child" href="blah">
    <i class="fa fa-signal fa-5x"></i>
    <span>Button 5</span>
  </a>
  <a class="child" href="blah">
    <i class="fa fa-signal fa-5x"></i>
    <span>Button 6</span>
  </a>
</div>

Flexbox 要求我们计算利润率

.parent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.child {
  text-decoration: none !important;
  flex: 0 0 160px;
  height: 140px;
  margin: 1em calc((100% - (160px *3)) / 7); /* I think it's 7 */
  padding-top: 10px;
  border-radius: 30px;
  border: 1px solid #003595;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="parent">
  <a class="child" href="blah">
    <i class="fa fa-broadcast-tower fa-5x"></i>
    <span>Button 1</span>
  </a>
  <a class="child" href="blah">
    <i class="fa fa-chart-line fa-5x"></i>
    <span>Button 2</span>
  </a>
  <a class="child" href="blah">
    <i class="fa fa-address-card fa-5x"></i>
    <span>Button 3</span>
  </a>
  <a class="child" href="blah">
    <i class="fa fa-clipboard-list fa-5x"></i>
    <span>Button 4</span>
  </a>
  <a class="child" href="blah">
    <i class="fa fa-signal fa-5x"></i>
    <span>Button 5</span>
  </a>
  <a class="child" href="blah">
    <i class="fa fa-signal fa-5x"></i>
    <span>Button 6</span>
  </a>
</div>

Answer 3

对于flex解决方案，您可以仅使用flex分隔子来分隔行并将其宽度设置为100％。我还为容器添加了justify-content: space-between。因为有了分频器，所以不需要进行保证金计算

.parent {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .child{
      text-decoration: none !important;
      display: inline-block;
      width: 160px;
      height: 140px;
      padding-top: 10px;
      margin: 30px 30px 30px 30px;
      border-radius: 30px;
      border: 1px solid #003595;
    }
    .divider {
      width: 100%;
    }

<div class="parent">
  <a class="child" href="blah">
      <i class="fa fa-broadcast-tower fa-5x"></i>
      <span>Button 1</span>
  </a>
  <a class="child" href="blah">
      <i class="fa fa-chart-line fa-5x"></i>
      <span>Button 2</span>  
  </a>
  <a class="child" href="blah">
      <i class="fa fa-address-card fa-5x"></i>
      <span>Button 3</span>
  </a>
  <div class="divider"></div>
  <a class="child" href="blah">
      <i class="fa fa-clipboard-list fa-5x"></i>
      <span>Button 4</span>
  </a>
  <a class="child" href="blah">
      <i class="fa fa-signal fa-5x"></i>
      <span>Button 5</span>
  </a>
  <a class="child" href="blah">
      <i class="fa fa-signal fa-5x"></i>
      <span>Button 6</span>
  </a>
</div>

或者正如我之前提到的，您可以将它们放入2个不同的flex容器中。它们都起作用，您可以选择最适合您的解决方案

Flexbox使子级宽度保持静态，每行设置个数

3 个答案: