Flexbox로 집을 어떻게 짓나요?

13534 단어 tutorialhtmlcss
저는 최근에 Flexbox를 배웠습니다. 이제 사랑스러운 DEV 커뮤니티를 위해 실용적인 데모를 제공할 시간입니다.

레이아웃은 웹사이트의 집입니다😂

이 블로그 레이아웃을 만들어 봅시다.



이제 이것을 단계별로 생각해 봅시다.


내비(Nav)는 세로로 전체 화면의 1/10 정도를 차지하고 나머지는 메인 영역으로 갑니다.

<body>
<nav>NAV</nav>
<main>MAIN</main>
</body>


스타일 -

*{
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
}
nav{
    flex-grow: 1;
}

main{
    flex-grow: 10;
}


먼저 본문에 추가합니다display: flex. flexbox를 사용하여 내부 요소를 배치하려면 부모 컨테이너에서 flexbox를 활성화해야 하므로 이 작업이 필요합니다.
이제 flexbox를 정렬할 수 있는 두 가지 주요 방법(행 또는 열)이 있습니다. 행은 가로, 열은 세로입니다.
이 경우 수평 정렬을 원하므로 flex-direction: row를 추가합니다.
이제 flex-grow 에 대해 이야기하면서 플렉스 컨테이너의 다른 요소에 비해 항목이 얼마나 커질지 정의합니다.
우리는 main 영역이 nav에 비해 10배의 공간을 차지하기를 원하므로 메인에 flex-grow: 10를 추가하고 flex-grow: 1에 nav를 추가합니다.

명심해야 할 또 다른 점은 부모 컨테이너의 flex 속성은 자식 요소 내부의 요소가 아니라 직접 자식에만 관련된다는 것입니다.
이제 main 영역으로 이동합니다. 이것이 우리가 원하는 것입니다.


이제 그것을 달성하기 위해 무엇을 해야 할까요?
header 와 content 는 모두 main 의 자식이므로 flexbox를 켜고 main 요소를 켜야 합니다.
header 및 content는 세로로 정렬됩니다.

<body>
    <nav>NAV</nav>
    <main>
        <header>HEADER</header>
        <section class="content">CONTENT</section>
    </main>
</body>




/* styles */
main{
    flex-grow: 10;
    display: flex;
    flex-direction: column;
}
header{
    flex-grow: 1;
}
.content{
    flex-grow: 8;  
}


첫 번째 레이아웃 이미지를 보면 header 영역과 content가 posts 영역 아래에 있으므로 이제 플렉스를 켜야 합니다aside.
컨테이너. 이것이 우리가 원하는 방식입니다 -



        <section class="content">
            <section class = "posts">
            POSTS
            </section>
            <aside>ASIDE</aside>
        </section>




.content{
    flex-grow: 8;   
    display: flex;
}

.posts{
    flex-grow: 5;
}
aside{
    flex-grow: 1;
    height: 40vh;
}


다시, 이 레이아웃의 이전 부분에서 했던 것과 동일한 훈련을 따라 .contents에 .content를 추가한 다음 .contents를 사용하여 하위 항목의 비율을 결정했습니다.
이제 이 레이아웃의 마지막 부분으로 이동합니다.display: flex 컨테이너 아래의 flex-grow. 나는 이것이 지금까지 이 튜토리얼의 다른 모든 것 중에서 가장 간단한 것이라고 생각합니다.

이제 individual posts가 부모 플렉스 컨테이너가 됩니다.

            <section class = "posts">
                <section class="post">POST</section>
                <section class="post">POST</section>
                <section class="post">POST</section>
            </section>




.posts{
    flex-grow: 5;
    display: flex;
    flex-direction: column;
}

.post{
    flex-grow: 1;
}


우리가 해야 할 일은 .posts를 켜고 .posts를 .posts로 지정하는 것뿐입니다. flex-direction에 column를 지정하여 각 게시물이 동일한 공간을 차지해야 함을 나타냅니다. flex-grow: 1 및 .post를 사용하여 이를 수행하는 다른 방법도 있지만 justify-content가 가장 직관적입니다.

이제 레이아웃이 완료되었으므로 최종 코드는 다음과 같습니다.

<body>
    <nav>NAV</nav>
    <main>
        <header>HEADER</header>
        <section class="content">
            <section class = "posts">
                <section class="post">POST</section>
                <section class="post">POST</section>
                <section class="post">POST</section>
            </section>
            <aside>ASIDE</aside>
        </section>
    </main>
</body>




*{
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
}
nav{
    flex-grow: 1;
}

main{
    flex-grow: 10;
    display: flex;
    flex-direction: column;
}
header{
    flex-grow: 1;   
}
.content{
    flex-grow: 8;    
    display: flex;
}

aside{
    flex-grow: 1;
    height: 40vh;
}

.posts{
    flex-grow: 5;
    display: flex;
    flex-direction: column;
}

.post{
    flex-grow: 1;
}


결론



Flexbox를 이해하고 나면 거의 직관적으로 레이아웃을 구축할 수 있습니다. 그것을 더 잘하기 위한 가장 좋은 팁은 연습하는 것입니다.
하향식 접근 방식은 Flexbox와 매우 잘 작동합니다. 주요 컨테이너를 먼저 생각하고 이들이 어떻게 관련되어 있는지 확인한 다음 그 안의 콘텐츠를 단계별로 생각하십시오.align-items 등과 같이 이 게시물에서 살펴보지 않은 flexbox에 대한 훨씬 더 많은 내용이 있습니다. 계속 살펴보세요!

참고 사항 - 물론 일반 레이아웃의 경우 패딩, 여백 및 색상이 포함되지만 flexbox에만 집중하기 위해 이 게시물에서는 생략했습니다.
JQ의 양식 검증
봉인된 XMLHttp Object Pool and XMLHttp chunnel Pool

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage