Professional Documents
Culture Documents
1 2 3
flex items are to be arranged in. By default, flex The flex-basis property defines how much the initia l
items will be arranged in the source order. The length of an individual flex-item can be.
flex-grow flex
The “ flex” is a shorthand property for defining
row-1
k
flex-grow, flex-shrin , and the flex-basis properties.
1 2 1 <div class=”flex-container”>
<div> 1 </div>
p
<div style=”flex: 0 0 300 x”> 3 </div>
1 1 1 <div> 4 </div>
</div>
This defines how much a flex item can grow inside the This shorthand property is highly recommended over
flex container. The default value is 0. In row-1, the defining individual properties.
first and the last are of equal sizes, but the second
align-self
<div class=”row-1”>
The align-self property sets the alignment property for
<div style=”flex-grow: 1”> 1 </div>
the selected flex item inside the flex-container. This
<div style=”flex-grow: 2”> 2 </div>
<div class=”row-2”>
flex-start
<div style=”flex-grow: 1”> 1 </div>
3
flex-shrink
1 2 3 4 5 6 7 8 9 flex-end
The flex-shrin k property defines how a flex item <div class=”container” style=”flex-start”>
should shrin k relative to the rest of the flex items. <div> 1 </div>
<div class=”flex-container”>
<div> 2 </div>
<div> 1 </div> f
<div style=”align-sel : flex-end”> 3 </div>
<div> 2 </div>
<div> 4 </div>
<div> 3 </div>
</div>
h k
<div style=”flex-s rin : 0”> 4 </div>
...
<div> 5 </div>
<div> 9 </div> k
The align-self property wor s similarly for
</div>
flex-start, center, space-between, space-around