Разница между шириной: 50% и гибкостью: 50% в CSS flexbox?

Когда в контейнере есть дисплей для гибки, в чем разница между установкой гибкого элемента: 50% и шириной: 50%. Результат, похоже, тот же:

ul {
  display: flex;
  flex-flow: row wrap;
}

.table a {
  flex: 50%;
  background: grey;
}

.table2 a {
  width: 50%;
  background: grey;
}

<ul class="table">
  <a href="#">ad ds fdsaf dsfa dsfj dsf dsfj lkdsjflkdsa jflkdsja lkfjdslkjfldska jlkfdsajlkdjslkajflkd sjalkfjdslkjdsalkjdlakjfldksjflkdsjflkdsjd fdsd</a>
  <a href="#">b</a>
  <a href="#">c</a>
  <a href="#">d</a>
</ul>

<ul class="table2">
  <a href="#">ad ds fdsaf dsfa dsfj dsf dsfj lkdsjflkdsa jflkdsja lkfjdslkjfldska jlkfdsajlkdjslkajflkd sjalkfjdslkjdsalkjdlakjfldksjflkdsjflkdsjd fdsd</a>
  <a href="#">b</a>
  <a href="#">c</a>
  <a href="#">d</a>
</ul>

http://codepen.io/anon/pen/KAbof

Ответы

Ответ 1

В этом случае нет эффективной разницы.

Фактически это потому, что flex является сокращением для flex-grow, flex-shrink и flex-basis в сочетании.

flex-basis определяет размер элемента по умолчанию перед распределением оставшегося пространства.

Итак, в этом случае вы определили всех a children` на 50%.

Ссылка: http://css-tricks.com/snippets/css/a-guide-to-flexbox/