Flexbox is a newer method of placing containers to alleviate the hassle of compensating for padding, margins, and borders. All we have to do to make a div a flexbox element is to set its CSS to display: flex
The direction that content flexes can be adjusted by using the flex-direction
We can also flip the order of elements using CSS without adjusting the order of the elements in the HTML using row-reverse
We can change the behavior of how child elements inside a flexbox container wrap around when the container changes its width by adding flex-wrap: wrap;
to our CSS.
The default behavior is flex-wrap: nowrap
, which is going to cause child elements to reduce their width until their content forces neighboring elements to overflow outside of the flexbox container.
We can align content within our flexbox by using the justify-content
is the default behavior aligning content to the left.
displays the flex items with space before, between, and after.
displays the flex items with space between.
We can vertically align the content inside of the flexbox container using the align-items
CSS property. The default behavior is align-items: stretch;
We can control the vertical distribution of rows of items within the flexbox container using the align-content
CSS property. The default behavior is for the items to stretch vertically.
It's super easy to perfectly center an element inside of a flexbox container by setting both justify-content
both to center.
Flex Item Properties
Any direct child elements inside of a flex container automatically become flex items, which provides them a number of CSS properties to change their behavior.
is a CSS property that allows us to change the ordering of the flex items without modifying their order in the HTML.
is a CSS property that specifies how much a flex item will grow relative to the rest of the flex items in that container. Default value is 0.
is a CSS property that specifies how much a flex item will shrink relative to the rest of the flex items in that container. Default value is 1.
is a CSS property that specifies the initial length of a flex item.
is a CSS property that allows a flex item to align itself in a different manner than the rest of the items in the flex container.
is a CSS property that can allow you to explicitely set a flex item to a percentage of the width of the flexbox container.