Получение изгиба, чтобы столбцы равной ширины с самым широким элементом

Question

У меня есть несколько кнопок, и я хочу, чтобы все они были одинаковой ширины, без необходимости задавать определенную ширину, поэтому естественно, что вы хотите, чтобы ширина всех кнопок принимала ширину самой широкойэлемент, но мне трудно добиться этого с помощью flex, так как кажется, что он просто хочет, чтобы все они были на 100%;Я также попробовал это с оберткой вокруг анкеров, но это не помогло, так как тогда все кнопки были различной ширины.

CodePen: https://codepen.io/gutterboy/pen/MZWroj?editors=1100

Так что вВ этом примере все кнопки должны соответствовать естественной ширине того, что было бы для «Groundskeeping».

HTML:

<div class="container">
  <div class="row">
    <div class="offset-md-4 col-md-4">
<div class="buttons">
    <a href="" class="btn alt">Plumbing</a>
    <a href="" class="btn alt">Electrical</a>
    <a href="" class="btn alt">Groundskeeping</a>
    <a href="" class="btn alt">Construction</a>
    <a href="" class="btn alt">Cleaning</a>
    <a href="" class="btn alt">Security</a>
    <a href="" class="btn alt">Trades Assistant</a>
    <a href="" class="btn alt">General Duties</a>
</div>      
    </div>
  </div>
</div>

CSS:

.buttons {
    display: flex;
    flex-direction: column;
  padding: 15px;
    background-color: gray;

    .btn {
        display: block;
        margin-bottom: 11px;

        &:last-child {
            padding-bottom: 21px;
        }

    }

}

a.btn {
    display: inline-block;
    text-align: center;
    height: 35px;
    padding: 0 20px;
    min-width: 128px;
    font-weight: bold;
    color: #fff;
    background-color: orange;
    border: 2px solid #000;
    white-space: nowrap;
    text-decoration: none;
}

Есть ли способ сделать это во Flex или что-то еще?

Answer 1

Вы почти хороши, вы должны использовать inline-flex вместо flex, чтобы иметь режим сжатия, чтобы соответствовать, таким образом, самая большая кнопка будет определять ширину контейнера, и все элементы по умолчанию растянуты до этой ширины.:

.container {
  margin-top: 15px;
  text-align:center;
}

.buttons {
  display: inline-flex;
  flex-direction: column;
  padding: 15px;
  background-color: gray;
}

.buttons .btn {
  display: block;
  margin-bottom: 11px;
}

.buttons .btn:last-child {
  padding-bottom: 21px;
}

a.btn {
  display: inline-block;
  text-align: center;
  height: 35px;
  padding: 0 20px;
  min-width: 128px;
  font-weight: bold;
  color: #fff;
  background-color: orange;
  border: 2px solid #000;
  white-space: nowrap;
  text-decoration: none;
}

<div class="container">

  <div class="buttons">
    <a href="" class="btn alt">Plumbing</a>
    <a href="" class="btn alt">Electrical</a>
    <a href="" class="btn alt">Groundskeeping</a>
    <a href="" class="btn alt">Construction</a>
    <a href="" class="btn alt">Cleaning</a>
    <a href="" class="btn alt">Security</a>
    <a href="" class="btn alt">Trades Assistant</a>
    <a href="" class="btn alt">General Duties</a>
  </div>

</div>