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)
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)
There is nothing in this pen
You need the content inside the same flex container.
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
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.