Daily Code 67 | Flexbox (🟥 HTML & 🟦 CSS Course 9)
Tags: beginners, daily, css, html
Published: 2024-02-12 08:26:18

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)

```html
<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>
```