Read on Twitter
1/10
~ CSS Flexbox Quickstart ~
Not sure what the Flexbox is? Or how to get started?
Then read on!
The Flexbox is designed to layout content either horizontally, or vertically.
It also has properties for easily spacing and aligning our items.
~ CSS Flexbox Quickstart ~
Not sure what the Flexbox is? Or how to get started?
Then read on!
The Flexbox is designed to layout content either horizontally, or vertically.
It also has properties for easily spacing and aligning our items.
2/10
How to get started:
You will need some HTML “child” items, all wrapped in a container, such as a div.
Set the container in your CSS to:
display: flex; https://codepen.io/chrisdixon161/pen/jOWZdgq
How to get started:
You will need some HTML “child” items, all wrapped in a container, such as a div.
Set the container in your CSS to:
display: flex; https://codepen.io/chrisdixon161/pen/jOWZdgq
3/10
Direction:
Main axis= main content direction, using flex-direction:
row= left-right (for ltr languages)
column= top-bottom
Reverse options:
row-reverse= right-left
column-reverse= bottom-top
Cross axis is the opposite of our above selection. https://codepen.io/chrisdixon161/pen/KKVQEPM
Direction:
Main axis= main content direction, using flex-direction:
row= left-right (for ltr languages)
column= top-bottom
Reverse options:
row-reverse= right-left
column-reverse= bottom-top
Cross axis is the opposite of our above selection. https://codepen.io/chrisdixon161/pen/KKVQEPM
4/10
justify-content:
This will align our child items across the MAIN axis.
We can set the items to be at the start, end, or center of our container.
And also set if we want any spacing to be shared equally between, around items, or between. https://codepen.io/chrisdixon161/pen/MWKQxJo
justify-content:
This will align our child items across the MAIN axis.
We can set the items to be at the start, end, or center of our container.
And also set if we want any spacing to be shared equally between, around items, or between. https://codepen.io/chrisdixon161/pen/MWKQxJo
6/10
flex-wrap:
This sets whether the child items should stay on a single line, or can wrap onto a new line.
By default, nowrap is set meaning all items will be forced onto the same line. https://codepen.io/chrisdixon161/pen/BajYbVz
flex-wrap:
This sets whether the child items should stay on a single line, or can wrap onto a new line.
By default, nowrap is set meaning all items will be forced onto the same line. https://codepen.io/chrisdixon161/pen/BajYbVz
9/10
flex:
The flex property defines how an item will grow or shrink. It is a shorthand for flex-grow, flex-shrink and flex-basis. There is options to control the sizing, but a basic way is to set how much space an item takes up, compared to the rest. https://codepen.io/chrisdixon161/pen/BajYbep
flex:
The flex property defines how an item will grow or shrink. It is a shorthand for flex-grow, flex-shrink and flex-basis. There is options to control the sizing, but a basic way is to set how much space an item takes up, compared to the rest. https://codepen.io/chrisdixon161/pen/BajYbep
5/10
align-items:
Align items lays out our child items on the CROSS axis. E.g. if our flex-direction was row, this would affect our items vertically. https://codepen.io/chrisdixon161/pen/dyGdrZL
align-items:
Align items lays out our child items on the CROSS axis. E.g. if our flex-direction was row, this would affect our items vertically. https://codepen.io/chrisdixon161/pen/dyGdrZL
7/10
align-self:
So far, all of the properties have been added to the wrapper, meaning they affect all child items.
align self is added to any individual child, to override the positioning previously set by align-items (on the wrapper). https://codepen.io/chrisdixon161/pen/gOPvEQP
align-self:
So far, all of the properties have been added to the wrapper, meaning they affect all child items.
align self is added to any individual child, to override the positioning previously set by align-items (on the wrapper). https://codepen.io/chrisdixon161/pen/gOPvEQP
8/10
order:
Flex items are laid out in the order we write them in the HTML
We can also change the order, which is also useful for responsive design layouts.
To do this, we set the order as a number value. Higher numbers = more “weight” and appear last. https://codepen.io/chrisdixon161/pen/xxZYBBB
order:
Flex items are laid out in the order we write them in the HTML
We can also change the order, which is also useful for responsive design layouts.
To do this, we set the order as a number value. Higher numbers = more “weight” and appear last. https://codepen.io/chrisdixon161/pen/xxZYBBB
10/10
The CSS Flexbox is a very powerful CSS tool to learn. Flexbox also goes deeper, but the above should cover you for most common situations, if you want to find out more, you can check the Mozilla docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
The CSS Flexbox is a very powerful CSS tool to learn. Flexbox also goes deeper, but the above should cover you for most common situations, if you want to find out more, you can check the Mozilla docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
