web-dev-qa-db-ja.com

CSSフレックスボックスで幅：50％とフレックス：50％の違いは？

コンテナにflexの表示がある場合、要素をflexに設定することと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

htmlcssflexboxwidth
17
Evanss

このインスタンスには実質的な違いはありません。

実際、flexはflex-grow、flex-shrink、およびflex-basisを組み合わせた省略形であるためです。

flex-basisは、残りのスペースが分配される前の要素のデフォルトサイズを定義します。

したがって、この場合、すべてのa children`を50％に定義しました。

参考記事： http://css-tricks.com/snippets/css/a-guide-to-flexbox/

17
Paulie_D