Flexbox flex element width specification: width or base?

Question

Let's say that I make 3 flexible columns, first 50%, and the other two are automatically configured.

.half { flex: 0 0 auto ; width: 50% ; } 

or

 .half { flex: 0 0 50%; } 

They seem to be functionally the same. They are?

Answer 1

The bottom instruction is equivalent:

 .half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; } 

Which in this case would be equivalent, since the box could not bend and, therefore, retained the initial width specified by the flex-basis.

Flex-basis determines the default size for an element before the remaining space is allocated, so if the element is allowed to bend (increase / decrease), this may not be 50% of the page width.

I found that I regularly return to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for help regarding flexbox :)

Answer 2

you can make it calm simple (flex-basis and width are similar):

 body { display:flex; } div { border:solid; } .half { width:50%;/* do not mind flex, just set a width if that speaks to you and older browsers */ } .wil { flex:1;/* will spray evenly in room left . flex-basis is here auto */ } 

 <div class="half"> 50% </div> <div class="wil"> share what left</div> <div class="wil"> share what left</div> 

you can even wrap things and clutter things to see behavior.

 body { display:flex; flex-wrap:wrap; } div { border:solid; } .half { width:50%;/* do not mind flex, just set a width if that speaks to you */ } .wil { flex:1;/* will spray evenly in room left , flex-basis is here auto you can use min and max size to make it a bit more flexible */ min-width:20%;/* set a min-width*/ max-width:450px; /* and also a max-width */ } 

 <div class="half"> 50% </div> <div class="wil"> share what left</div> <div class="wil"> share what left</div> <!-- lets see how it behaves when wrapping withiut real order --> <div class="half"> 50% </div> <div class="wil"> share what left</div> <div class="wil"> share what left</div> <div class="wil"> share what left</div> <div class="half"> 50% </div> <div class="wil"> share what left</div> <div class="wil"> share what left</div> <div class="wil"> share what left</div> <div class="wil"> share what left</div> <div class="half"> 50% </div> <div class="wil"> share what left</div> <div class="wil"> share what left</div> <div class="half"> 50% </div> <div class="wil"> share what left</div>