feature 1

Font that used to be here was U001, a nice Universe clone from Font Library. But it was too slow from there so changed to a Google font, Archivo Narrow.

This group has only display: flex; and flex: 1; for the child elements.

feature 2

See also Page 5, Page 8, Page 11 and Page 12.

Delectus labore sunt libero rerum earum nobis expedita ratione natus ex iure!

feature 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero qui, consectetur explicabo.

Iure non iste provident veniam debitis amet tempore, libero nisi ducimus vero.

feature 1

These boxes have had their parent set to align-items: flex-start.

In the first example being undefined the default was used which is align-items: stretch

Another similar setting is flex: flex-end;. This could be good for making graphs possibly.

feature 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eveniet similique perspiciatis!

Explicabo, quis, labore. Fugiat dignissimos facere suscipit reprehenderit commodi iste consectetur non!

feature 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, doloribus ea laborum.

Pariatur nesciunt hic magni quisquam minima atque reiciendis animi quis, voluptatem aliquid.

feature 1

This is set to align-items: flex-end. Another possiblity is align-items: center which is between flex-start and flex-end.

Nisi, eos. Eveniet nobis eum facilis quisquam molestias suscipit tenetur nihil doloremque?

feature 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam doloremque tempore maiores.

At blanditiis iure cumque aperiam fugit aliquam quisquam nulla similique possimus quas!

feature 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem modi, cum. Officiis.

flex-basis

You can add gaps using width and margin settings for your flex items.

But the way to set gaps is to first delete any proportion setting: eg. flex: 1. Then use the flex-basis property to set the width of each item so that to total is it ends up less than the total. In percentages this means less than 100%. I this example each box is set to flex-basis: 32%. The total (3 x 32%) adds up to 96%. which leaves 4% of space available for gaps.

Alternatively you can use .item + .item: margin-left: 1em;

feature 2

By default the items will be to the left with the leftover space on the right.

To fix that all you have to do is is use the justify-content: property on your flex box container: justify-content: space-between

Justify-Content values:

  • justify-content: space-around similar to space-betwen but with space at the L and R ends too.
  • justify-content:flex-start
  • justify-content:flex-end
  • justify-content:center
  • justify-content:space-between
  • justify-content:space-around
  • justify-content:initial
  • justify-content:inherit

gap

Starting with: flex: 1; this set of boxes uses gap property.

Add to the parent

To use gap you just add it to the parent with a size value:

.parent {
gap: 15px;
}

gap is new

At the time of writing gap is only implented in Chrome and Firefox.

Dolore laboriosam, incidunt fugit quam mollitia nemo nam ipsam, iusto. In, esse!