Flex Box Experiments
1. No CSS
Item 1
This container has no flexbox CSS applied.
The three divs are laid out like normal block level items.
2. Using different proportions and setting the order
Item 1
This time they get different ratios:
This box gets flex:3
Also the ordering of the three items has been changed with with CSS using the property order
This item gets order: 2 to set it as the second time reading from L to R.
The menu gets order: 1 to move it from position 3 (far R) to position 1 (far L).
Item 2
This box gets flex:1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptatum, alias doloribus?
Ab sint consectetur maxime nisi error voluptatem quod temporibus voluptate illo doloribus.
3. Ordering
Item 1
This time they get different ratios:
This box gets flex:3
Officia cupiditate suscipit hic, architecto dolores illo odio, nemo ullam ipsum ratione alias.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus maxime, dolor odio. Assumenda, fuga, provident.
Voluptatum magnam, beatae perferendis neque placeat, enim, ipsam magni unde aspernatur harum aperiam porro adipisci.
Architecto doloribus incidunt dicta quaerat, recusandae exercitationem consequatur ut, aliquam dolorum temporibus amet iste sequi?
Item 2
This box gets flex:1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptatum, alias doloribus?
Ab sint consectetur maxime nisi error voluptatem quod temporibus voluptate illo doloribus.