Daily Code 67 | Flexbox (🟥 HTML & 🟦 CSS Course 9)

Another day, another HTML & CSS challenge from my course! https://www.youtube.com/watch?v=G3e-cpL7ofc

Today I learned about flexbox, another super useful technique in CSS

My Code

This code below shows both my practice for grid and flexbox.

Looks like flexbox just offers more flexibility for the individual elements, whereas grid is mor like a table (literally a grid I guess haha)

<div style="
    display: grid;
    grid-template-columns: 100px 100px;
    ">
    <div style="background-color: lightblue;">div 1</div>
    <div style="background-color: lightpink;">
      div 2 <p>text</p>
    </div>
  </div>

  <div style="
    margin-top: 30px;
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    ">
    <div style="background-color: lightblue;">div 1</div>
    <div style="background-color: lightpink;">div 2</div>
    <div style="background-color: lightblue;">div 3</div>
  </div>

  <div style="
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
    ">
    <div style="background-color: lightblue; height: 30px;">1fr</div>
    <div style="background-color: lightpink; height: 20px;">1fr</div>
    <div style="background-color: lightblue; height: 20px;">1fr</div>
    <div style="background-color: lightpink; height: 20px;">1fr</div>
    <div style="background-color: lightblue; height: 20px;">1fr</div>
    <div style="background-color: lightpink; height: 20px;">1fr</div>
  </div>

  <div style="
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  ">
    <div style="background-color: lightcoral;">flexbox 1</div>
    <div style="background-color: lightgreen;">flexbox 2</div>
  </div>

  <div style="
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  ">
    <div style="background-color: lightcoral;
    width: 100px;
    ">flexbox 100px</div>
    <div style="background-color: lightgreen;
    flex: 1;
    ">flexbox 2</div>
  </div>

  <div style="
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  ">
    <div style="background-color: lightcoral;
    width: 100px;
    ">flexbox 100px</div>
    <div style="background-color: lightgreen;
    flex: 1;
    ">flexbox flex 1</div>
    <div style="background-color: lightcoral;
    flex: 2;
    ">flexbox flex 2</div>
  </div>

  <div style="
  margin-top: 10px;
  height: 70px;
  border-width: 1px;
  border-style: solid;
  border-color: grey;

  display: flex;
  justify-content: end;
  flex-direction: row;
  ">
    <div style="background-color: lightcoral;
    width: 100px;
    ">flexbox 100px</div>
    <div style="background-color: lightgreen;
    width: 100px;
    ">flexbox 100px</div>
    <div style="background-color: lightcoral;
    width: 100px;
    ">flexbox 100px</div>
  </div>

  <div style="
  margin-top: 10px;
  height: 70px;
  border-width: 1px;
  border-style: solid;
  border-color: grey;

  display: flex;
  justify-content: space-between;
  flex-direction: row;
  ">
    <div style="background-color: lightcoral;
    width: 100px;
    ">flexbox 100px</div>
    <div style="background-color: lightgreen;
    width: 100px;
    ">flexbox 100px</div>
    <div style="background-color: lightcoral;
    width: 100px;
    ">flexbox 100px</div>
  </div>

  <div style="
  margin-top: 10px;
  height: 70px;
  border-width: 1px;
  border-style: solid;
  border-color: grey;

  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  ">
    <div style="background-color: lightcoral;
    width: 100px;
    ">flexbox 100px</div>
    <div style="background-color: lightgreen;
    width: 100px;
    ">flexbox 100px</div>
    <div style="background-color: lightcoral;
    width: 100px;
    ">flexbox 100px</div>
  </div>