Formatting contexts
Flexbox and grid layouts
Dr Graeme StuartFlexbox and grid layouts
Dr Graeme StuartBy default, content is arranged in a page according to the flow layout.
|
|
Block elements take up the full width of their container. Inline elements flow like text. Everything flows, wraps and adjusts according to the size of the viewport.
Setting
position: relative
moves an element relative to it’s default position in the flow.
|
|
The blue elements have been moved in this way.
Setting
position: absolute
on an element, removes it from the normal document flow. This causes the rest of the page to adjust, taking up the available space.
|
|
The green element is positioned relative to its closest positioned ancestor, the viewport.
Setting
position: relative
on a parent element allows us to position the child elements within their parent.
|
|
The green element is positioned relative to its closest positioned ancestor, the viewport.
The
float
property can be set toleft
orright
to change the way an element behaves and where it is located in the flow.
|
|
|
|
Setting the
display
property of an element will change the way the element behaves.We have seen the difference between
block
andinline
. These can be controlled by setting thedisplay
property.
These are controlling the outer display type which controls how the element participates in the flow layout.
We can provide other values for the
display
property to control the formatting context for child elements.These change the default flow layout to either
flex
orgrid
layout.
These are controlling the outer display type which controls how the element participates in the flow layout.
flex-direction
controls which dimension becomes the main axis.
justify-content
controls how elements are distributed on the main axis.
align-items
controls how elements are placed on the cross-axis.
gap
sets the minimum space between elements.
For more control also see:
flex-grow
, flex-shrink
, flex-basis
and flex-wrap
.
grid-template-columns
determines the number and type of columns.
|
|
|
|
|
|
|
|
This unit includes two exercises which will walk you through using the flex and grid formatting contexts to control how elements are laid out in your page.
If you have any questions, now is a good time to ask.
Thanks for listening
Dr Graeme Stuart