Week 6:
Flexbox
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 CSS property.
We can also flip the order of elements using CSS without adjusting the order of the elements in the HTML using
row-reverse or
column-reverse.
Wrapping
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.
Justify Content
We can align content within our flexbox by using the
justify-content CSS property.
justify-content: flex-start; is the default behavior aligning content to the left.
justify-content: center;
justify-content: flex-end;
justify-content: space-around; displays the flex items with space before, between, and after.
justify-content: space-between; displays the flex items with space between.
Align Items
We can vertically align the content inside of the flexbox container using the
align-items CSS property. The default behavior is
align-items: stretch;
align-items: flex-start;
align-items: center;
align-items: flex-end;
Align Content
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.
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: flex-start;
align-content: flex-end;
Perfect Centering
It's super easy to perfectly center an element inside of a flexbox container by setting both
justify-content and
align-items 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.
order is a CSS property that allows us to change the ordering of the flex items without modifying their order in the HTML.
flex-grow 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.
flex-shrink 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.
flex-basis is a CSS property that specifies the initial length of a flex item.
align-self 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.
flex is a CSS property that can allow you to explicitely set a flex item to a percentage of the width of the flexbox container.