DEV Community

Cover image for Daily Code 68 | Nested Flexbox (πŸŸ₯ HTML & 🟦 CSS Course 10)
Gregor Schafroth
Gregor Schafroth

Posted on

Daily Code 68 | Nested Flexbox (πŸŸ₯ HTML & 🟦 CSS Course 10)

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;

.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;
}
Enter fullscreen mode Exit fullscreen mode
<!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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)