Intro

HTML Learning One - Basics: https://blog.yexca.net/archives/146
HTML Learning Two - Lists, Tables, and Forms: https://blog.yexca.net/archives/150
HTML Learning Three - Web Layout: https://blog.yexca.net/archives/195

Standard flow, also known as document flow, refers to the default arrangement rules for tags on a page. For example, block elements take up a full line, while inline elements can display multiple per line.

If you don’t want to use standard flow for layout, you can use floats or Flexbox.

Floats

Purpose: To arrange block elements horizontally. The property is float, with two values: left and right.

Elements with float will be taken out of the standard document flow.

Clearing Float Effects

Because floated elements are removed from the standard flow, if a parent element has no explicit height, the floated children won’t expand it, potentially leading to layout issues.

Four common ways to clear floats:

Extra Element Method

Add a block-level element at the end of the parent, and set its CSS property clear:both.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<style>
    .clearfix {
        clear: both;
    }
</style>

<div>
    <div></div>
    <div class="clearfix"></div>
</div>

Single Pseudo-element Method

Same principle as above.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<style>
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
</style>

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Dual Pseudo-element Method

This method solves both parent collapse issues and float effects simultaneously.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<style>
	.clearfix::before, /* Fixes parent collapse */
	.clearfix::after {
        content: "";
        display: table;
    }
    .clearfix::after { /* Clears floats */
        clear: both;
    }
</style>

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Using overflow

Add the CSS property overflow: hidden; to the parent element.

Flexbox

Flexbox, also known as flexible box layout, is a browser-recommended layout model. It’s great for structured layouts, offering powerful space distribution and alignment capabilities.

Plus, the Flex model doesn’t suffer from elements leaving the standard flow like floats do, making web layouts simpler and more flexible.

Components

Flexbox has four main components:

• Flex Container
• Flex Item
• Main Axis: Defaults to horizontal.
• Cross Axis: Defaults to vertical.

Set display: flex; on the parent element to make it a flex container. Its children then become flex items, which can automatically shrink or grow.

Flexbox Properties

Main Axis Alignment

Property: justify-content

Cross Axis Alignment

Properties

• align-items: Controls the cross-axis alignment for all flex items within the current flex container (set on the flex container).
• align-self: Controls the cross-axis alignment for a single flex item (set on the flex item).

Changing Main Axis Direction

The main axis defaults to horizontal, the cross axis to vertical.

Property: flex-direction

Flex Grow/Shrink Ratio

Purpose: Controls the size of a flex item along the main axis. Property: flex, added to the child (flex item).

Value: An integer, representing a proportion of the remaining space in the parent.

Flex Item Wrapping

Flex items can automatically shrink or grow. By default, all flex items stay on a single line. Property: flex-wrap, added to the parent (flex container).

Values are wrap (wrap to new lines) and nowrap (no wrapping, default).

Line Alignment

Property: align-content

Values are the same as justify-content (main axis alignment), and only apply to multi-line flex containers.