Link Search Menu Expand Document
HTML&CSS

CSS Layout

Class Agenda

  1. Introduction to CSS layout & the “normal flow”
  2. Introduction to flexbox

Introduction to CSS Layout

A website is divided into different parts, that together add to a layout. E.g. you have a header, a footer, navigation and main and side-content. All this needs can be structured with CSS.

Example of a layout

You can use various techniques in CSS to control the layout. We will focus mainly on

  • The flow layout
  • Flexbox
  • Grid

There are other techniques, like positioning and using the table for layouting, which is not used anymore nowadays with more modern approaches. If you are curious, you can find some more on the history of CSS layouting here

Display property

The most frequently used values of the display property are:

  • display: block
  • display: inline
  • display: inline-block
  • display: flex
  • display: grid
  • display: none

The display property defines how an element is treated on your website in regards to layout. The values block, inline and inline-block, are using the Flow Layout while flex and grid have their own layout system.

Flow layout with block, inline and inline-block

Example of a flow layout

display: inline

  • inline elements behave like words in a sentence.
  • They sit next to each other in the inline direction.
  • You can’t set an explicit width and height on inline elements. Any block level margin and padding will be ignored by the surrounding elements.
  • Elements such as <span>, <a>, <strong>, are inline by default.

display: block

  • block elements create a new line for themselves.
  • A block element will expand to the full width by default.
  • The margin, width and height on all sides of a block element can be added
  • Elements such as <div>, <h1> and <p> (paragraph), are block by default.

display: inline-block

  • inline-block combines features of both inline and block elements
  • Inline-block elements can appear next to each other and we can set their dimensions using the width and height properties.
  • <img> are the best example of default inline-block elements

You can play around with this example and solve this exercise

Quiz

Here a small quiz to test your knowledge.

Introduction to Flexbox

Flexbox is a comparatively newer way to layout elements on the page without the limits and frustration of Floats like:

  • You have to clear Floats (when the containing element collapses).
  • Sometimes have to change the order of your HTML to achieve a Floats design.

Flexbox layout makes it easier to design flexible responsive layout structure (hint: Flexbox = flexible boxes).

With flexbox, you can align elements horizontally and vertically. Unlike floats, you can re-order flex items without needing to change the HTML.

The Flex Model

  • flex is the value for the display property that activates the Flexbox layout on an element.
  • What is a flex container?
  • What are flex items?
  • What are the most common properties that can be used on a flex container?
    • flex-direction (default row)
    • flex-wrap (default nowrap)
    • justify-content (default: flex-start)
    • align-items (default: stretch)
    • align-content (default: stretch)
    • flex-flow
  • What are the most common properties that can be used on a flex item?
    • align-self is similar to align-items on the container, but applies to a single flex item.
    • flex: shorthand property for the flex-grow, flex-shrink, and flex-basis
    • flex-grow: specifies how an item grows when it is allowed to take extra space available in the container (default: 0)
    • flex-shrink specifies how an item shrinks when there is not enough space available in the container (default: 1)
    • flex-basis
    • order

Example

Exercises

  1. Practice using Flexbox with this codepen

Quiz

Flexbox quiz!

Homework

Resources

Slides