web-dev-qa-db-fra.com

Différence entre largeur: 50% et flex: 50% dans une flexbox CSS?

Lorsque son conteneur a un affichage pour flex, quelle est la différence entre la définition d'un élément pour flex: 50% et la largeur: 50%. Le résultat semble être le même:

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

Il n'y a pas de différence effective dans ce cas.

En fait, c'est parce que flex est un raccourci pour flex-grow, flex-shrink et flex-basis combiné.

flex-basis définit la taille par défaut d'un élément avant que l'espace restant ne soit distribué.

Donc, dans ce cas, vous avez défini tous les a enfants` à 50%.

Article de référence: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

17
Paulie_D