Flexbox 사용 사례.

언제 어떻게 그 멋진 상자를 다룰 수 있는지 봅시다.

비디오 버전을 보고 싶다면 바로 여기에 있습니다.

1. 내비게이션

A. 내비게이션 사이의 공간.

HTML :

      <nav class="flex-nav nav-1">
        <img src="rocket.png" />

        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>

CSS :

.nav-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

B. 중앙 탐색.

HTML :

      <nav class="flex-nav nav-2">
        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>

CSS :

.nav-1{
  display: flex;
    justify-content: center;
    align-items: center;
}

C. 왼쪽/오른쪽 탐색.

HTML :

      <nav class="flex-nav nav-3">
        <img src="rocket.png" />

        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>

CSS :

.nav-1{
    display: flex;
    justify-content: start;
    align-items: center;
}

2. 반응형 갤러리

HTML :

    <div class="gallery">

        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>

        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>

        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>

    </div>

CSS :

.gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
    max-width: 1300px;
    margin: 70px auto 0;
}

3. X와 Y 중심

HTML :

    <div class="container-center">
      <div class="yellow-bloc"></div>
    </div>

CSS :

.container-center  {
    width: 300px;
    height: 300px;
    background: rgb(49, 156, 206);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.yellow-bloc{
    width: 50px;
    height: 50px;
    background: yellow;
}

좋습니다. 모든 사용 사례를 보고 싶다면 YouTube 동영상(기사 시작 부분)으로 이동할 수 있습니다. !

소스 코드 :
https://github.com/Ziratsu/Flexbox-use-cases

제 새로운 유튜브 채널을 보러 오세요:

나를 따르는 최초의 개척자 중 하나가 되십시오 어? ⛰️

YT :

다음 시간에 빠른 튜토리얼로 만나요!

엔조.