代码之家 › 专栏 › 技术社区 › JWiley

Flexbox保持子宽度不变,每行设置个数

flexbox css html

JWiley · 技术社区 · 7 年前

我使用flexbox创建一组需要居中且分组均匀的按钮(本例每行3个)。不过,我的选择似乎是将它们分组,但通过添加到子项来允许宽度增长:

flex: 0 0 20%

或者保持它们的静态宽度,并允许flex wrap根据屏幕大小更改它们的位置。

    .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 显示/播放大小调整。

3 回复 | 直到 7 年前

Sphinxxx 7 年前

你说你的按钮需要居中,那么添加一个 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/

Huangism 7 年前

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>

或者就像我之前提到的,你可以把它们放到两个不同的flex容器中。它们都有效,你可以选择最适合你的解决方案

Paulie_D 7 年前

CSS网格 能做到的

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>

要求我们计算利润率

.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-Aweome/4.7.0/css/font-Aweome.min.css”rel=“样式表“/>
<div class=“parent”>
<a class=“child”href=“blah”>
<i class=“fa fa broadcast tower fa-5x”></i>
<span>按钮1</span>
</a>
<a class=“child”href=“blah”>
<i class=“fa fa chart line fa-5x”></i>
</a>
<a class=“child”href=“blah”>
<span>按钮3<span>
<a class=“child”href=“blah”>
<span>按钮4<span>
<a class=“child”href=“blah”>
<i class=“fa fa signal fa-5x”></i>
</a>
<i class=“fa fa signal fa-5x”></i>
<span>按钮6<span>
</a>