웹공부를 하다보니 Grid와 Flex를 겉핡기 식으로만 알고 있는거같아 복습차 글을 적어보려 한다
Flex
먼저 flex는 레이아웃을 만들기 위한 HTML구조는 다음과 같다:
<div class="container">
<div class="item A">A</div>
<div class="item B">B</div>
<div class="item C">C</div>
</div>.container = Flex Container (부모)
.item = Flex Item (자식)
부모요소인 컨테이너가 Flex의 영향을 받고, 설정된 속성에 따라 자식요소인 Item들이 배치된다
. container {
display: flex;
}Flex는 container에 적용하는 속성 / item에 적용하는 속성으로 나눌 수 있다
⏺Container에 적용하는 속성
⏹ Display: flex
.container {
display: flex;
/* display: inline-flex; */
}display를 flex로 적용해주면 content의 크기만큼 width과 height를 가진다
Flex는 축인 2가지 인데
아이템들이 배치된 방향의 축을 메인축 Main Axis
메인축과 수직인 축을 교차축 Cross Axis이라고 부른다
기본값은 row이다.
⏹ Flex-direction
중심축을 설정하는 방법은
.container {
flex-direction: row 기본값
/* flex-direction: row-reverse */
/* flex-direction: column */
/* flex-direction: column-reverse */
}⏹ flex-warp
flex는 컨테이너 내부에서 더 이상 아이템들을 담을 수 없을 때
아이템 줄바꿈을 설정할 수 있게 해주는 속성입니다
.container {
flex-wrap: nowrap; #기본값
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
}🔷flex-flow
flex-flow: (flex-direction) (flex-warp)
flex-direction과 flex-warp를 한꺼번에 사용할 수 있게 해주는 단축 속성
.container {
flex-flow: row wrap;
/* flex-flow: (flex-direction) (flex-warp); */
}⏹정렬: Justify-content
메인축 방향을 정렬 시키는 방법은 다음과 같다:
.container {
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}flex-start: 시작점 정렬
flex-end:끝점 정렬
center: 중앙 정렬(메인축에 따라)
space-between: 아이템들의 사이에 균일한 간격을 만들어 줍니다
space-around: 아이템들의 둘레에 균일한 간격을 만들어 줍니다
space-evenly: 아이템들의 사이와 양 사이드 끝에 균일한 간격을 만들어 줍니다
출처:https://studiomeal.com/archives/197 1분코딩
(가장 쉽게 이해할 수 있는 그림)
⏹정렬: align-items
교차축/수직축 방향 정렬
❗❗❗ justify는 메인축 align은 교차축/수직축
.container {
align-items: stretch;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}stretch: 수직축 방향으로 끝까지 늘어남 *(기본값)
flex-start: 시작점, 메인축이 column이면 왼쪽
flex-end: 끝점, 메인축이 column이면 오른쪽
center: 중앙정렬
baseline: 텍스트 라인을 기준으로 정렬
⏹정렬: align-content
flex-warp:wrap;이 설정되어있는 상태에서 아이템들의 행이 1줄 이였다가 2줄 이상이 되었을 때 수직축 방향 정렬을 결정하는 속성
.container {
flex-wrap: wrap;
align-content: stretch;
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
}flex-start: 시작점 정렬
flex-end:끝점 정렬
center: 중앙 정렬(메인축에 따라)
space-between: 행과 행 사이에 균일한 간격을 만들어 줍니다
space-around: 행과 행 둘레에 균일한 간격을 만들어 줍니다
space-evenly: 행과 행 사이와 양 사이드 끝에 균일한 간격을 만들어 줍니다
⏺ item에 적용하는 속성
⏹flex-basis
item의 기본 크기를 설정해준다, row가 메인축일 때 너비를 column이 메인축일 때 높이를 설정해준다
.item {
flex-basis: auto; /*기본값,item의 기본 크기값 */
/* flex-basis: 0; */
/* flex-basis: 25%; */
/* flex-basis: 100px; */
/* flex-basis: 5rem; */
/* flex-basis: content; */
}flex-basis: 100px와 width: 100px일 때 차이는
-flex-basis: 100px:
기존에 item.width < 100px인 item은 100px을 기본크기로 설정되지만
기존에 item.width > 100px인 item은 기존의 width를 유지한다
기본 크기가 커진다면 같이 유연하게 커짐, 100px로 줄어들지는 않음
-flex-width: 100px:
기존에 item의 width의 크기가 어떠한들 무조건 100px로 설정한다
둘다 같이 설정한다면
.item {
flex-basis: 100px;
width: 100px;
}flex-basis를 무시하고 width크기로 설정된다
⏹flex-grow
.item {
flex-grow: 1;
/* flex-grow: 0; */ /* 기본값 */
}flex-grow: 0;이 기본값, 1로 설정해 준다면 해당 아이템이 유연한 박스로 변하기 되며 원래 크기보다 커지면서 빈 공간을 메우게 됩니다.
flex-grow의 설정값의 의미는 아이템들의 width/flex-basis를 제외한 여백을 설정값의 비율로 나누어 가진다 (Chrome DevTools로 확인)
⏹flex-shrink
flex-grow와 반대로 flex-shrink는 아이템이 flex-basis값보다 작아질 수 있게 설정해줄 수 있는 속성이다.
설정값의 비율만큼 더 빠르게 작아진다
.item {
flex-basis: 150px;
flex-shrink: 1; /* 기본값 */
}기본값은 0, flex-shrink를 0으로 설정하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 colomn을 쉽게 만들 수 있다.
🔷flex
flex-grow, flex-shrink, flex-basis의 축약형 속성
.item {
flex: 3;
/* flex-grow: 3; flex-shrink: 3; flex-basis: 0%; */
flex: 1 2 auto;
/* flex-grow: 1; flex-shrink: 2; flex-basis: auto; */
flex: 1 200px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
}여백의 비율보다 영역자체 container 자체를 설정하는 비율로 분할하고 싶다면 flex-basis:0; 으로 하면 된다
⏹align-self
수직축의 아이템 각각의 방향을 정렬해 줄 수 있다
.item {
align-self: auto;
/* align-self: stretch; */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: baseline; */
}⏹z-index
item의 z축 정렬, 설정값이 클수록 위로 올라감, 기본값 0;
