Chapter 1-2. Flex 핵심정리 - 배치의 흐름
카테고리: Css
태그: flex Programming css
인프런에 있는 1%코딩님의 강의 CSS Flex와 Grid 제대로 익히기 를 듣고 정리한 필기입니다. 😀
👱Flex 레이아웃을 만들기 위한 기본 구조
- Flex 레이아웃을 만들기 위한 기본 HTML 구조는 다음과 같습니다.
<body>부분에 내용을 적어주시면 됩니다.
<div class="container">
<div class="item">aaa</div>
<div class="item">bbbbbbbbbbb</div>
<div class="item">cccc</div>
</div>
div.container는 부모 요소로, Flex Container라고 불리고,div.item은 자식 요소로 Flex Item이라고 불립니다. 그리고<head>에<style>태그를 삽입하여 flex를 적용해줍니다.컨테이너는 Flex의 전체 공간, 아이템은 개별 공간으로 이해하면 될것 같아요!
<style>
.container {
/* display: flex; */
display: inline-flex;
}
</style>
flex는 메인축 전체의 공간을 차지하는 방식입니다.inline-flex는 메인축안의 내용(아이템)만큼만 차지하는 방식입니다.inline-block처럼 동작하네요!
👱메인축(Main axis)과 교차축(Cross axis)
-
메인축 : Flex Item이 배치된 방향을 말합니다. 오뎅꼬치라고 생각하고 오뎅꼬치안에 오뎅(아이템)이 꽂아진다고 이해하시면 편해요.
-
교차축 : 메인축과 수직이 되는 축을 교차축이라고 말합니다.
배치 방향 설정 - flex-direction
메인축의 방향을 설정할 수 있습니다.
- row : 왼쪽부터 아이템(오뎅)이 끼워집니다. row는 기본값입니다.
- row-reverse : 오른부터 아이템(오뎅)이 끼워집니다.
- column : 위부터 아이템(오뎅)이 끼워집니다.
- column-reverse : 아래부터 아이템(오뎅)이 끼워집니다.
<style>
.container {
display: flex;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}
</style>
줄넘김 처리 설정 - flex-wrap
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유가 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성입니다.
- nowrap : 줄넘김을 하지 않겠다는 의미로, 컨테이너를 넘어가게 됩니다. nowrap이 기본값입니다.
- wrap : 아래로 줄넘김을 하겠다는 의미입니다.
- wrap-reverse : 위로 줄넘김을 하겠다는 의미입니다.
<style>
.container {
display: flex;
flex-wrap: wrap;
}
</style>
flex-direction와 flex-wrap을 동시에 표현하기 - flex-flow
flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성입니다. flex-direction, flex-wrap의 순으로 한 칸 떼고 써주시면 됩니다.
<style>
.container {
display: flex;
flex-flow: row wrap;
}
</style>
🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄
댓글 남기기