Flex (Flex Grow, Flex Shrink, and Flex Basis)
flex: [flex-grow flex-shrink flex-basis];
Examples
flex: 0 1 auto/flex: initial;
/* default - Do not grow, can shrink, make size of content */
flex: 1 0 200px;
/* Grow element, do not shrink, make it 200px (min width) */
flex: 0 1 200px;
/* Do not grow element, can shrink, make it 200px (max width) */
flex: 1 0 auto;
/* Grow element, do not shrink, make size of content */
flex-grow
Tells our element whether or not it can take up additional space. A flex-grow value of 1 or larger tells our element to grow to take up the available space. An element with a flex-grow value set to 0 will not grow to take up available space.
/* 33.3% */
.one { flex-grow: 1; }
/* 66.6% */
.two { flex-grow: 2; }
flex-shrink
The opposite of flex grow, how much an elment will shrink in the space.
An element with a flex-shrink value of 0 will not shrink as our page gets smaller. This is only true if there is no flex-grow value on this element. If there is a flex-grow value, the element won’t shrink smaller than it’s content.
An element with a flex shrink value of 1 will shrink, but not smaller than it’s content.
Distribute space
<div class="flex">
<div class="col a"></div>
<div class="col a"></div>
<div class="col b"></div>
</div>
.flex {
display: flex;
}
.flex .col {
background: purple;
flex: 1 1 0;
height: 50px;
margin: 5px;
}
.flex .col:first-child {
margin-left: 0;
}
.flex .col:last-child {
margin-right: 0;
}
Prevent flex items from stretching
.flex {
align-items: flex-start;
display: flex;
}
/* OR */
.flex {
align-self: start;
}