A quick overview of flexbox

Flexbox is a big topic because there are so many 'flex' properties available for you to use.

So I decided to try to focus on just a few of them to demonstrate what I think are the most important things to understand when you are first getting started with flexbox.

The code created in the video is below.

To summarize the important points from the video:

  1. By setting the display property to flex, it makes the immediate children 'flex items' (AKA 'flex children').
    • By default, the children will then occupy only as much width as they need, and will align themselves horizontally (like inline elements).
    • By default, the children will stretch vertically to occupy as much vertical space as they can.
  2. The justify-content setting controls the arrangement of the flex-children on the main axis.
    • space-around puts even spacing around the children
    • space-between puts even spacing between the children
    • space-evenly distributes space evenly between the children
    • center will centers children on the main axis
  3. The align-items setting controls the arrangement of the flex-children on the cross axis.
    • start aligns the children to the top of the container
    • center aligns the children to the center of the container
    • end aligns the children to the bottom of the container
    • stretch is the default, which makes the flex-children stretch out to match the height of the flex container will centers children on the main axis
  4. Setting the flex property on the flex children allows you control the ratio of the available space that a child will occupy.
    • The flex property is a 'shorthand' one, and can be quite a bit more complicated than how I'm using it here if you want more info on checkout this link
  5. If you set the flex-direction of the container to column, then the children will align vertically (in a column), and the main axis and cross axis will be rotated.
  6. If you want to align the text inside an element, you can set that element's display property to flex and then use the just-content and align-items properties to do so.



Here's the code that we ended up with in the video, in case you didn't type it in yourself.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    div{ 
      border: 1px solid black; 
      height: 100px;
    }

    #container{
      display: flex;
      height: 300px;
      justify-content: space-evenly;
      align-items:end;
	  /*flex-direction: column;*/
    }

    #container div{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #container div.bigger{
      flex: 2;
    }

  </style>
</head>
<body>
  <div id="container">
    <div>DIV 1</div>
    <div class="bigger">DIV 2</div>
    <div>DIV 3</div>
  </div>
</body>
</html>