learn-css.org

Made by Ron Reiter

Welcome

Welcome to the interactive Learn CSS tutorial!

This course teaches CSS using simple and interactive examples. Since CSS is a visual language, our mind understands and memorizes the CSS commands better when taught visually.

This tutorial will help you:

  • Learn the basics of CSS
  • Understand how each CSS property is used in relation to a child or a parent element
  • Understand how changing every CSS property affects the visuals of the page

Flexbox Layout

Flexbox is probably the strongest and most useful layout mechanism used today. The general idea of the layout mechanism is to describe how elements within a container are positioned accross the main axis.

In this example, the main axis is horizontal because the direction of the main axis goes from left to right. Flexbox

To enable Flexbox layout, a parent element must be defined with the CSS property display: flex. No Flexbox property will work without specifying it, so keep this in mind.

In the Flexbox layout, the parent element is called the container whereas the children of the element are called the items.

Display: Flex

Display specifies the type of layout that the component uses. With Flexbox, the container element must be defined as display: flex in order for the items of that element to be affected by the flexbox layout.

Note that this property does not affect the parent element at all, only the children.

1
2
3
4
5
6
<div style="
  display: block
">
  <div>Hello</div>
  <div>World!</div>
</div>
Hello
World!

Flex Direction

The Flex Direction property defines the direction of the main axis.

1
2
3
4
5
6
7
8
<div style="
  display: flex;
  flex-direction: row;
">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>
A
B
C

Justify Content

This property defines how the browser distributes space between and around items along the main axis.

1
2
3
4
5
6
7
8
<div style="
  display: flex;
  justify-content: start;
">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>
A
B
C