Topics for today
- Positioning
- Floats
- One-dimensional layout (Flexbox, Multi-col)
- Grid Systems
position
property controls which positioning scheme is used.
Its initial value is static
, which corresponds to the default document flow.
position: absolute
is applied?top
, right
,
bottom
, left
properties.position
!= static
top: 50%; left: 50%;
. What happens?z-index
controls which element is on top of what. Its initial value is auto
which corresponds to source order.position: fixed
to the rescue!
It's just like absolute
but the containing block is the viewport.
This has the effect of the element staying in the same place during scrolling.
position: sticky
is a hybrid of relative
and fixed
:
relative
.fixed
relative
againposition:sticky
doesn't do anything by itself, you also need offsets!When learning CSS, the precision of absolute positioning may be tempting, but avoid it: It will bite you back later, when you need to make changes!
float
property removes an element from normal flow and sticks it to the left (or right) side of its parent container.
Any content that comes below the floated element in the normal layout flow will now wrap around it, filling up the space to the right-hand side of it as far up as the top of the floated element.clear
: both
can help with the footer, but is not ideal (try adding some top margin…)float
& clear
) were how CSS layouts were done until ~2015!
display: flex
enables Flexbox layout on an element.
This element becomes the Flex Container and its children are called Flex Items.flex
: N
defines the proportion that a flex item spreads over.flex-direction
: column
on the flex container makes the items flow from top to bottomalign-items
and justify-content
on the flex container specify alignment in each direction. Which direction depends on the value of flex-direction
When elements are laid out as flex items, they are laid out along two axes:
display: flex
set on it is called the flex container.flex-direction
)display: flex
flex
to stretch items proportionallyauto
margins distribute available spacealign-items
and justify-content
to control alignmentdisplay: flex
enables Flexbox layout on an element.
This element becomes the Flex Container and its children are called Flex Items.flex
: N
defines the proportion that a flex item spreads over.flex-direction
: column
on the flex container makes the items flow from top to bottomalign-items
and justify-content
on the flex container specify alignment in each direction. Which direction depends on the value of flex-direction
You may find useful:
display
gap
flex
align-items
:focus-within
Save your codepen and submit to
display: contents
hides an element's box (and thus if the element is a flex item, it makes its children flex items)
but still displays its descendants.
display: contents
do not render their own box, but do render their descendants’ boxes
Corollary: If inside a flex container, their children become flex items instead of themselves
columns
, column-count
, or column-width
gap
allows you to control spacing between columnscolumn-rule
allows you to add lines between columns. Its syntax is similar to border
.Multicol is not only about text, it can be used to lay out any element
In graphic design, as in architecture, the guts of a finished product are held up by an underlying support structure that—more often than not—is invisible to the viewer, but can just as easily make or break a design.
display: grid
enables Grid layout on an element.
This element becomes the Grid Container and its children are called Grid Items.display: grid
doesn’t do much on its own, you also have to define the Grid template.
There is a number of properties to do that, such as:
grid-template-rows
grid-template-columns
grid-template
1fr
unit allows us to distribute the available space in fractions without having to do any math with percentages.gap
property allows us to set spacing between the grid cells.grid-row
and grid-column
properties allow us to place items on specific rows and/or columns. Note that multiple items can be placed in the same cell, and then they will overlap!grid-area
allows you to assign an element to a named area.grid-row
and grid-column
allow us to control which grid lines elements fall on.repeat
allows us to create multiple columns or rows with the same metricsgrid-row-end
and grid-column-end
allow us to make elements span multiple grid cells without explicit control of which grid cells they fall on.dense
keyword in grid-auto-flow
prevents holesdisplay:contents
allows us to make descendants grid children