Daily Code 68 | Nested Flexbox (🟥 HTML & 🟦 CSS Course 10)
Tags: beginners, daily, css, html
Published: 2024-02-13 09:54:02

It’s HTML & CSS course day 10! https://www.youtube.com/watch?v=G3e-cpL7ofc

Today I look at **nexted flexboxes**

Basically this was just more exercise about how to use flex boxes, notably to make the YouTube header of this classe’s project

# My Code

Probably this code is not worth reading through, but what I find interesting is how flexbox allows us to arrange objects exactly how we want, for example with `justify-content: space-between;`

```html
.header {
  height: 55px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left-section {
  display: flex;
  align-items: center;
}

.hamburger-menu {
  height: 24px;
  margin-left: 24px;
  margin-right: 20px;
}

.youtube-logo {
  height: 20px;
}

.middle-section {
  flex: 1;
  margin-left: 70px;
  max-width: 500px;
  display: flex;
  align-items: center;
}

.search-bar {
  flex: 1;
  height: 36px;
  padding-left: 10px;
  font-size: 16px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(192, 192, 192);
  border-radius: 2px;
  box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.05);
  width: 0;
}

.search-bar::placeholder {
  font-family: Roboto, Arial;
  font-size: 16px
}

.search-button {
  height: 40px;
  width: 66px;
  background-color: rgb(240, 240, 240);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(192, 192, 192);
  margin-left: -1px;
  margin-right: 10px;
}

.search-icon {
  height: 25px;
  margin-top: 4px;
}

.voice-search-button {
  margin-right: 10px;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  border: none;
  background-color: rgb(240, 240, 240);
}

.voice-search-icon {
  height: 24px;
  margin-top: 4px;
}

.right-section {
  width: 180px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.upload-icon {
  height: 24px;
}

.youtube-apps-icon {
  height: 24px;
}

.notifications-icon {
  height: 24px;
}

.current-user-picture {
  height: 32px;
  border-radius: 16px;
}
```

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Flexbox</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Long+Cang&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="styles/general.css">
  <link rel="stylesheet" href="styles/header.css">
  <link rel="stylesheet" href="styles/video.css">
</head>

<body>
  <div class="header">
    <div class="left-section">
      <img class="hamburger-menu" src="icons/hamburger-menu.svg" alt="menu">
      <img class="youtube-logo" src="icons/youtube-logo.svg" alt="YouTube logo">
    </div>
    <div class="middle-section">
      <input class="search-bar" type="text" placeholder="Search">
      <button class="search-button">
        <img class="search-icon" src="icons/search.svg" alt="search">
      </button>
      <button class="voice-search-button">
        <img class="voice-search-icon" src="icons/voice-search-icon.svg" alt="voice-search">
      </button>
    </div>
    <div class="right-section">
      <img class="upload-icon" src="icons/upload.svg" alt="">
      <img class="youtube-apps-icon" src="icons/youtube-apps.svg" alt="">
      <img class="notifications-icon" src="icons/notifications.svg" alt="">
      <img class="current-user-picture" src="channel-pictures/my-channel.jpeg" alt="">
    </div>
  </div>

  <div class="video-grid">

    <div class="video-preview">
      <div class="thumbnail-row">
        <img class="thumbnail" src="thumbnails/thumbnail-1.webp" alt="">
      </div>
      <div class="video-info-grid">
        <div class="channel-picture">
          <img class="profile-picture" src="channel-pictures/channel-1.jpeg">
        </div>
        <div class="video-info">
          <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
          <p class="video-author">Marques Brownlee</p>
          <p class="video-stats">3.4M views &#183; 6 months ago</p>
        </div>
      </div>
    </div>

    <div class="video-preview">
      <div class="thumbnail-row">
        <img class="thumbnail" src="thumbnails/thumbnail-2.webp" alt="">
      </div>
      <div class="video-info-grid">
        <div class="channel-picture">
          <img class="profile-picture" src="channel-pictures/channel-2.jpeg">
        </div>
        <div class="video-info">
          <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
          <p class="video-author">Marques Brownlee</p>
          <p class="video-stats">3.4M views &#183; 6 months ago</p>
        </div>
      </div>
    </div>

    <div class="video-preview">
      <div class="thumbnail-row">
        <img class="thumbnail" src="thumbnails/thumbnail-3.webp" alt="">
      </div>
      <div class="video-info-grid">
        <div class="channel-picture">
          <img class="profile-picture" src="channel-pictures/channel-3.jpeg">
        </div>
        <div class="video-info">
          <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
          <p class="video-author">Marques Brownlee</p>
          <p class="video-stats">3.4M views &#183; 6 months ago</p>
        </div>
      </div>
    </div>

    <div class="video-preview">
      <div class="thumbnail-row">
        <img class="thumbnail" src="thumbnails/thumbnail-4.webp" alt="">
      </div>
      <div class="video-info-grid">
        <div class="channel-picture">
          <img class="profile-picture" src="channel-pictures/channel-4.jpeg">
        </div>
        <div class="video-info">
          <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
          <p class="video-author">Marques Brownlee</p>
          <p class="video-stats">3.4M views &#183; 6 months ago</p>
        </div>
      </div>
    </div>

    <div class="video-preview">
      <div class="thumbnail-row">
        <img class="thumbnail" src="thumbnails/thumbnail-5.webp" alt="">
      </div>
      <div class="video-info-grid">
        <div class="channel-picture">
          <img class="profile-picture" src="channel-pictures/channel-5.jpeg">
        </div>
        <div class="video-info">
          <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
          <p class="video-author">Marques Brownlee</p>
          <p class="video-stats">3.4M views &#183; 6 months ago</p>
        </div>
      </div>
    </div>

    <div class="video-preview">
      <div class="thumbnail-row">
        <img class="thumbnail" src="thumbnails/thumbnail-6.webp" alt="">
      </div>
      <div class="video-info-grid">
        <div class="channel-picture">
          <img class="profile-picture" src="channel-pictures/channel-6.jpeg">
        </div>
        <div class="video-info">
          <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
          <p class="video-author">Marques Brownlee</p>
          <p class="video-stats">3.4M views &#183; 6 months ago</p>
        </div>
      </div>
    </div>

  </div>

</body>

</html>
```