| Interactive Media Design

Flexbox Container Axis

That is, Flexbox deals with layouts as either a column or a row (axis) as defined by the flex-direction property of the container.

Two Axis

Main Axis

The main axis is defined by the flex-direction property on the container. Four possible values include:

  • row, (default value)
  • row-reverse,
  • column and,
  • column-reverse.

When thinking about how this compares to CSS grid axes, column and column-reverse can be considered block axis while row and row-reverse can be considered inline axis.

Cross Axis

The cross axis is always defined to be the perpendicular axis to flex-direction. If flex-direction is set to column then the cross axis is row.

Writing Mode

Flexbox makes no assumptions about the writing mode of the user and as such uses contextual language like 'start' or 'end' instead of 'left' or 'right'.

Depending on the language or regional settings of the user, browsers can present the page in a way that accommodates the user needs.

Flex Container

To begin using Flexbox, a flex container must be created. Similar to CSS grid, we accomplish this by setting the display: property to flex or inline-flex.

.container {
    display: flex;
}

As is the case with CSS grid, all direct children of a flex container become flex items and inherit initial default properties.

Changing the Main Axis

As mentioned earlier, the flex-direction property controls the main axis of the flex container. We can change the direction of the main axis:

.container {
    display: flex;
    flex-direction: column;
}

Flex Wrap

The flex-wrap property provides a way to handle flex items that may not all fit onto a single row. The wrap value, instructs the browser to wrap items on subsequent rows. You will need to handle any overflow conditions for items that cannot shrink or grow. More on that to come...

Example

Row

.flex-container {
    background-color: rgb(171, 174, 180);
    padding: 1em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    /* Or use the shorthand version...

    flex-flow: row wrap;

    */
    
}

.box {
    background-color: rgb(204, 172, 66);
    border: 1px solid rgb(131, 105, 21);
    padding: 3em;
}

<div class=“flex-container”>
    <!— flex items —>
    <div class=“box” id=“one”>Box 1</div>
    <div class=“box” id=“two”>Box 2</div>
    <div class=“box” id=“three”>Box 3</div>
    <div class=“box” id=“four”>Box 4</div>
    <div class=“box” id=five>Box 5</div>
</div>
Box 1
Box 2
Box 3
Box 4
Box 5

Column

.flex-container {
    background-color: rgb(171, 174, 180);
    display: flex;
    flex-direction: column;
    padding: 1em;
}

.box {
    background-color: rgb(204, 172, 66);
    border: 1px solid rgb(131, 105, 21);
    padding: 3em;
}

<div class=“flex-container”>
    <!— flex items —>
    <div class=“box” id=“one”>Box 1</div>
    <div class=“box” id=“two”>Box 2</div>
    <div class=“box” id=“three”>Box 3</div>
    <div class=“box” id=“four”>Box 4</div>
    <div class=“box” id="five">Box 5</div>
</div>
Box 1
Box 2
Box 3
Box 4
Box 5

Further Review

This YouTube video was created by Steve Griffith.

This YouTube video was created by Steve Griffith.

See Also

References