WEBD 150 – FlexBox & Organizing CSS

CSS FlexBox

What is Flexbox?

Flex Box (The flexible box model) provides an easier, cleaner and more efficient way to lay out items within a container. Because Flexbox is so… Flexible, it will cleanly lay out content within a container even if the size of the container is unknown. It gives the container the ability to alter its items within width/height and order of the items within (which also can be changed all within the CSS without touching the HTML code).

Flex box layout is direction agnostic, it works well both horizontally or vertically.

Remember, flex box is made for one dimensional layouts within a parent container, whereas Grid is made for 2 dimensional bigger scale layouts.

Parent Properties (Flex Container)

display: flex OR inline-flex; – I declare you to be a flex box!

flex-direction: row OR column; – Makes the items within the flex box container go horizontally or vertically.

• flex-direction: row;

  /* CSS Document */
  .myflexbox {
      display: flex;
      flex-direction: row;
  }
  
  .myflexbox div {
      border: 1px solid;
      border-color: #3A3A3A;
      border-radius: 5px;
      padding: 10px;
  }
  
  .box1 {
      flex: 1;
  }
  
  .box2 {
      flex: 1;
  }
  
  .box3 {
      flex: 1;
  }

  Box One
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae totam ad dolore quia deserunt sapiente eum nostrum non cum. Deserunt.

  Box Two
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequuntur error nam labore nemo, obcaecati molestiae officiis, quia quidem natus.

  Box Three
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et fugit consectetur perferendis beatae illum, repellendus eligendi quaerat praesentium mollitia. Quibusdam.

• flex-direction: column;

  /* CSS Document */
  .myflexbox {
      display: flex;
      flex-direction: column;
  }
  
  .myflexbox div {
      border: 1px solid;
      border-color: #3A3A3A;
      border-radius: 5px;
      padding: 10px;
  }
  
  .box1 {
      flex: 1;
  }
  
  .box2 {
      flex: 1;
  }
  
  .box3 {
      flex: 1;
  }

  Box One
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae totam ad dolore quia deserunt sapiente eum nostrum non cum. Deserunt.

  Box Two
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequuntur error nam labore nemo, obcaecati molestiae officiis, quia quidem natus.

  Box Three
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et fugit consectetur perferendis beatae illum, repellendus eligendi quaerat praesentium mollitia. Quibusdam.

flex-wrap: wrap OR nowrap OR wrap-reverse; – What this does is tells the items within the flex box how to behave when a window is resized.

• wrap – Is the default and the items in the flex box will contract or expand within the flex box container when the window is resized. (may cause overflow).
• nowrap – Will make the items move down to the next line responsively to the window being resized smaller in the order defined by flex-direction.
• wrap-reverse – Will make the items move down to the next line responsively to the window being resized smaller in the opposite order defined by flex-direction.

justify-content: flex-start OR flex-end OR center; – flex-start would align to the left | flex-end would align to the right | center would center it.

• justify-content: flex-start; (default)

  /* CSS Document */
  .myflexbox {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
  }
  
  .myflexbox div {
      border: 1px solid;
      border-color: #3A3A3A;
      border-radius: 5px;
      padding: 10px;
  }
  
  .box {
      width: 20%;
  }

• justify-content: flex-end;

  /* CSS Document */
  .myflexbox {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
  }
  
  .myflexbox div {
      border: 1px solid;
      border-color: #3A3A3A;
      border-radius: 5px;
      padding: 10px;
  }
  
  .box {
      width: 20%;
  }

• justify-content: center;

  /* CSS Document */
  .myflexbox {
      display: flex;
      flex-direction: row;
      justify-content: center;
  }
  
  .myflexbox div {
      border: 1px solid;
      border-color: #3A3A3A;
      border-radius: 5px;
      padding: 10px;
  }
  
  .box {
      width: 20%;
  }

• justify-content: space-around;

  /* CSS Document */
  .myflexbox {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
  }
  
  .myflexbox div {
      border: 1px solid;
      border-color: #3A3A3A;
      border-radius: 5px;
      padding: 10px;
  }
  
  .box {
      width: 20%;
  }

• justify-content: space-between;

  /* CSS Document */
  .myflexbox {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
  }
  
  .myflexbox div {
      border: 1px solid;
      border-color: #3A3A3A;
      border-radius: 5px;
      padding: 10px;
  }
  
  .box {
      width: 20%;
  }

align-items: flex-start OR flex-end OR center;

• align-items: flex-start;

  /* CSS Document */
  .myflexbox {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
  }
  
  .myflexbox div {
      border: 1px solid;
      border-color: #3A3A3A;
      border-radius: 5px;
      padding: 10px;
  }
  
  .box1 {
      flex: 1;
      order: 2;
  }
  
  .box2 {
      flex: 2;
      order: 1;
  }
  
  .box3 {
      flex: 1;
      order: 3;
  }

• align-items: flex-end;

  /* CSS Document */
  .myflexbox {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
  }
  
  .myflexbox div {
      border: 1px solid;
      border-color: #3A3A3A;
      border-radius: 5px;
      padding: 10px;
  }
  
  .box1 {
      flex: 1;
      order: 2;
  }
  
  .box2 {
      flex: 2;
      order: 1;
  }
  
  .box3 {
      flex: 1;
      order: 3;
  }

• align-items: center;

  /* CSS Document */
  .myflexbox {
      display: flex;
      flex-direction: row;
      align-items: center;
  }
  
  .myflexbox div {
      border: 1px solid;
      border-color: #3A3A3A;
      border-radius: 5px;
      padding: 10px;
  }
  
  .box1 {
      flex: 1;
      order: 2;
  }
  
  .box2 {
      flex: 2;
      order: 1;
  }
  
  .box3 {
      flex: 1;
      order: 3;
  }

align-content: flex-start OR flex-end OR center; – Similar to justify content, does not work with boxes when they are in a single line. It will justify the boxes when there are more than 1 lines of boxes to the desired effect.

Child Properties (Flex Items)

flex: <number>; – Can make the desired box wider than the others (recommended method)

flex-grow: <number>; – Does the same

/* CSS Document */
.myflexbox {
    display: flex;
    flex-direction: row;
}

.myflexbox div {
    border: 1px solid;
    border-color: #3A3A3A;
    border-radius: 5px;
    padding: 10px;
}

.box1 {
    flex: 1;
}

.box2 {
    flex: 3;
}

.box3 {
    flex: 1;
}

flex-shrink: <number>; – Shrinks the desired box

/* CSS Document */
/* Just some style for the div */
.myflexbox div {
    border: 1px solid;
    border-color: #A5A5A5;
    border-radius: 2px;
    padding: 10px;
}

/* Flexbox */
.myflexbox {
    display: flex;
}

.box1 {
    flex: 1;
}

.box2 {
    flex-shrink: 2;
}

.box3 {
    flex: 1;
}

flex-basis: <length>; – It’s the FLEX way to assign width, but width works as well.

/* CSS Document */
/* Just some style for the div */
.myflexbox div {
    border: 1px solid;
    border-color: #A5A5A5;
    border-radius: 2px;
    padding: 10px;
}

/* Flexbox */
.myflexbox {
    display: flex;
    height: 500px;
}

.box1 {
    flex-basis: 100px;
}

.box2 {

}

.box3 {

}

align-self: flex-start OR flex-end OR center; – Will align the desired box

/* CSS Document */
/* Just some style for the div */
.myflexbox div {
    border: 1px solid;
    border-color: #A5A5A5;
    border-radius: 2px;
    padding: 10px;
}

/* Flexbox */
.myflexbox {
    display: flex;
    height: 300px;
}

.box1 {
    align-self: flex-end;
}

.box2 {

}

.box3 {

}

order: <number>; – Can change the order of the boxes without having to edit the HTML code

/* CSS Document */
.myflexbox {
    display: flex;
    flex-direction: row;
}

.myflexbox div {
    border: 1px solid;
    border-color: #3A3A3A;
    border-radius: 5px;
    padding: 10px;
}

.box1 {
    flex: 1;
    order: 2;
}

.box2 {
    flex: 2;
    order: 1;
}

.box3 {
    flex: 1;
    order: 3;
}

Categorised in: Lectures, MDCP 102, WEBD 150

This post was written by amax