Flex Item 1—order

This box has had it's position changed using: order: 8; which should move it from the first place to the last. However because not all the flex items in this block are set it behaves erratically.

BTW I deleted Items 6 and 7. Not needed.

Flex Item 2—flex-basis

Instead of using width to define the width of a box you use flex-basis

The font used here is Nunito Sans, the black version for the headings.

Flex Item 3

Where possible each flexbox will expand to allow the full length of the longest sentence.

So that explains why the flexboxes here are different widths.

Flex Item 4

THis page has 3 separate flex containers to play about with.

See also Page 5, Page 11 and Page 12.

Flex Item 5—fonts

This page uses Nunito Sans with a weight of 300 for the paragraph text and 700 for the headings.

Flex Item 8

This item has had it's order changed with the property: order: 1;

But despite that for some reason it hasn't budged.

Flex Item 9

Set to order: 4;

Sapiente odio reiciendis, soluta dolore. Quod nisi eligendi necessitatibus quam nobis, perferendis dolores. Tempora.

Flex Item 10

This item is set to order: 3;.

The flex-items in this container are all set to flex: 1;, hence the even widths.

Flex Item 11

Set to order: 2;.

Setting these boxes to flex-wrap: wrap; lays them out horizontally.

Flex Item 12

Set to order: 1;.

So what works is when every item has it's order set. If fewer that all are set the behaviour is erratic.

Molestias ducimus neque quod eaque iste, iure possimus eos dolorum consectetur esse fugit. Rem.

Flex Item 13—flex-direction

This container has had it's flex-direction set to column.

These flex-items have a minimum height because of the header and paragraph start new lines.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, doloremque quod placeat. Optio unde libero natus dolores illo voluptatem consequuntur iusto, dicta nemo, harum aliquam minima architecto, quo distinctio aliquid fugiat voluptatum, magnam debitis!

Flex Item 14

These items also set to flex: 1; but it has no effect in this situation.

Flex Item 15

The background uses the linear-gradient function: background-image: linear-gradient(20deg, rgb(247, 140, 158), rgb(60, 135, 248)); .

Eos aspernatur magni omnis earum optio rerum distinctio nulla iste! Dolores eaque atque fugit!

Flex Item 16

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi culpa dicta, aliquam quos quibusdam?

Magni repellat, corporis sint quas. Eligendi maiores accusamus facere, hic iure eveniet aliquid enim?