Basics of flexbox

I created this code-pen to understand the very basics of layout:

For the .test-div2 class - why doesn’t flexbox work and change the direction of the letters (d,e,f to f,e,d)

There is nothing in this pen :thinking:


This is the link:

  1. You need the content inside the same flex container.

  2. The flex-direction does not change the writing mode.

Here is pen I made at some point to test flex-direction, flex wrapping, and writing modes. Might be useful.

When using flexbox…

think of everything as squares.

<div class="parent">
  <div class="square">d</div>
  <div class="square">d</div>
  <div class="square">d</div>

To get the effect you’re looking for you would apply the flexbox to the parent in this example.

The structure you have is:

<div class="parent">d</div>
<div class="parent">e</div>
<div class="parent">f</div>

In that example there are no boxes to manipulate around. To move the letters around you would need divs around those letters (which are there in this example) AND place a div around all those divs with the desired flex-box properties.