Andreas Hammervik
Andreas Hammervik's Blog

Andreas Hammervik's Blog

Flexbox

Flexbox

Andreas Hammervik's photo
Andreas Hammervik
·May 29, 2022·

1 min read

I started over the Frontend Career Path Module 2 with new content to repeat some basics. Today I have learned abit about Flexbox:

  • Justify-content: defines how the browser distributes space between and around content items along the horisontal line (main-axis.)
  • Align-items: Controls the alignment of items on the vertical line (cross-axis)
  • Flex-direction: Is by default row wich means items stack alongside of each other and sets how flex items are placed in the flex container defining the main axis and the direction.

This picture illustrates default row maincrossaxis.jpg

If you set flex-direction to column items will stack on top of each other and the main axis and cross axis switch position.

justifyalign.jpg The illustrations I have borrowed from Scrimba's tutorial in the Web dev basics Module.

 
Share this