CTEC2712: Web application development

Formatting contexts

Flexbox and grid layouts

Dr Graeme Stuart

Default flow

By default, content is arranged in a page according to the flow layout.

1
2
3
4
5
6
7
8
body {
    font-size: 1.4em;
}
body * {
    outline: 2px solid hsla(0, 50%, 50%, 0.2);
    background: hsla(0, 50%, 50%, 0.1);
    padding-inline: 0.25rem;
}

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.

Position (relative)

Setting position: relative moves an element relative to it’s default position in the flow.

1
2
3
4
5
6
7
.down-left {
    outline: 2px solid hsla(200, 50%, 50%, 0.2);
    background: hsla(200, 50%, 50%, 0.5);
    position: relative;
    top: 0.5em;
    left: -0.5em;
}

The blue elements have been moved in this way.

Position (absolute)

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.

1
2
3
4
5
6
7
.down-left {
    outline: 2px solid hsla(100, 50%, 50%, 0.2);
    background: hsla(100, 50%, 50%, 0.5);
    position: absolute;
    top: 0.5em;
    left: -0.5em;
}

The green element is positioned relative to its closest positioned ancestor, the viewport.

Position (absolute) again

Setting position: relative on a parent element allows us to position the child elements within their parent.

1
2
3
4
5
6
7
8
9
.rel {
    position: relative;
    height: 5em;
}
.rel > * { position: absolute; }
.rel > :nth-child(1) { top: 0; left: 0; }
.rel > :nth-child(2) { top: 0; right: 0; }
.rel > :nth-child(3) { bottom: 0; left: 0; }
.rel > :nth-child(4) { bottom: 0; right: 0; }

The green element is positioned relative to its closest positioned ancestor, the viewport.

Float

The float property can be set to left or right to change the way an element behaves and where it is located in the flow.

1
2
3
4
    <p class="left">
        <img src="https://placecats.com/150/150" alt="">
        Lorem ipsum dolor...
    </p>

1
2
3
4
5
6
7
p.left img {
    float: left;
    margin-right: 1rem;
}
p:has(img) {
    border: 1px solid black;
}

Outer display

Setting the display property of an element will change the way the element behaves.
We have seen the difference between block and inline. These can be controlled by setting the display property.

These are controlling the outer display type which controls how the element participates in the flow layout.

Inner display

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 or grid layout.

These are controlling the outer display type which controls how the element participates in the flow layout.

flex properties

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 properties

grid-template-columns determines the number and type of columns.

1
2
3
body {
    grid-template-columns: 1fr;
};    

1
2
3
body {
    grid-template-columns: 1fr 1fr;
};    

1
2
3
body {
    grid-template-columns: 1fr 4fr 1fr;
};    

1
2
3
body {
    grid-template-columns: 1fr 10% 2fr 2em;
};    

Exercises

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.

Formatting contexts

If you have any questions, now is a good time to ask.

Thanks for listening
Dr Graeme Stuart