May 7th, 2019
Day four of learning CSS Flexbox. I started with flex-shrink.
flex-shrink is the first property up till now that applies to the flex item and not the flex container (parent).
It allows us to shrink an item if the flex container is too small. The flex items will shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.
Flex-item takes a number as a value. The number indicates how much it will shrink relative to the other items in the container. If one item has flex-shrink 1 and the other flex-shrink 3, the one with 3 will shrink three times as much as the others. Think of this as percent and as a way to make columns in different sizes.
Flex-grow is the opposite of flex-shrink. It controls the size of items when the parent container expands. So an item with flex-grow 3 will grow three times as much as an item with flex-grow 1.
This property specifies the starting size of the item before flex-shrink and flex-grow start making adjustments. It can be set as %, em, px, etc. We can also set it to auto, sizing the items based on the content.
We can write shorthand code to set several flex properties at once. It’s the same as border, background, padding, etc.
The default property settings are:
flex: 0 1 auto;
This will set the item to flex-grow: 0, flex-shrink: 1 and flex-basis: auto.
flex: 2 2 150px;
flex: 1 1 150px;
This example will make box1 grow twice as much when the container is more than 300px, but it will shrink twice as much when it’s below 300px.
The order property tells the CSS in which order we want the flex-items to appear. By default, they will appear in the same way they are set in the HTML. But by using numbers as values on the order property, we can change the items around. Negative numbers are usable.
This allows us to adjust each flex item’s alignment individually, instead of all at once. This is an alternative to float, clear and vertical-align since those don’t work on flex items.
That concludes the Flex Box challenge on fCC.