Basics of flexbox

HTML-CSS
1

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

https://codepen.io/colfah/pen/yWpRGb

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

2

There is nothing in this pen :thinking:

3

Sorry!

This is the link: https://codepen.io/colfah/pen/yWpRGb

4

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

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

https://codepen.io/anon/pen/QRazqz

Here is pen I made at some point to test flex-direction, flex wrapping, and writing modes. Might be useful.
https://codepen.io/lasjorg/pen/oVbvNx

https://drafts.csswg.org/css-flexbox-1/#axis-mapping

5

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>
</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.