Core
Interaction

Creating Structure with HTML and CSS

Tuesday, 2/14 – Lab

Creating structure with CSS Flexbox

Download the flexbox layout starter kit

The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides. [developer.mozilla.org]

Flex direction terms

Basic structure

Layouts made using flexbox will typically consist of a container element (the flex container) and a series of items inside the container (the flexible elements).

<div class="flex-container">
  <div class="flex-item">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex-item">
    <p>Another flexible item</p>
  </div>
</div>

.flex-container {
  display: flex;
}

Review the starter kit examples for ideas about how you can structure your HTML and CSS in a way that makes it easy to create layouts using flexbox.

See if you can apply these techniques to your current Click, Click projects.

Other resources