Flexbox로 집을 어떻게 짓나요?
레이아웃은 웹사이트의 집입니다😂
이 블로그 레이아웃을 만들어 봅시다.
이제 이것을 단계별로 생각해 봅시다.
내비(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에만 집중하기 위해 이 게시물에서는 생략했습니다.
Reference
이 문제에 관하여(Flexbox로 집을 어떻게 짓나요?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/manangouhari/building-layouts-with-flexbox-40e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)