CSS의 꽃 flex에 대해 알아보자
- flex-direction : 아이템들의 배치 방향 지정 (default : row)
- flex-wrap : 자식요소들이 부모요소의 크기를 넘어갈 때 줄바꿈 지정 (default : nowrap)
- flew-flow : flex-direction과 flex-wrap를 같이 사용할 수 있는 단축 속성
- justify-content : 아이템을 중심축 방향으로 정렬 (default : flex-start)
- align-items : 아이템을 교차축 방향으로 정렬 (default : stretch)
- align-content : wrap으로 지정된 상태에서 아이템들의 행이 2줄 이상 됐을 때 교차축 방향으로 정렬
- flex-basis : 아이템의 기본 크기 지정 (자식 요소에 지정)
- flex-grow : 아이템의 flex-basis값을 제외한 여백을 지정한 비율만큼 가져감 (dafault : 0)
- flex-shrink : 아이템이 flex-basis값보다 얼마나 작아지는지 지정 (deafult : 1)
- flex : flex-grow, flex-basis, flex-shrink를 한번에 사용할 수 있는 단축 속성
- align-self : 지정한 아이템만 교차축 정렬 (align-content는 여러개 교차축 정렬) (default : auto)
- order : 아이템들의 배치 순서 지정 (시각적으로만)
😄 code1. direction, wrap
/* HTML */
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
/* CSS */
.container {
display: flex;
/* 아이템을 세로축으로 배치 */
flex-direction: column;
/* 아이템들이 부모 크기를 벗어나게 되면 줄바꿈*/
flex-wrap: wrap;
/* 위의 2줄을 같이 사용하는 단축 속성 */
flex-flow : column, wrap;
}
.item {
width: 100px;
height: 100px;
background-color: black;
margin: 10px;
}- div는 기본적으로 block요소여서 item들이 세로로 배치되지만 부모인 container에 flex를 지정하면 item들이 가로로 배치된다
이 때중심축은 x축, 교차축은 y축이 된다 (flex-direction이 row일 때)
flex-direction
row (default) : 아이템들이 x축으로 배치
row-reverse : 아이템들이 역순으로 x축으로 배치
column : 아이템들이 y축으로 배치
column-reverse : 아이템들이 역순으로 y축으로 배치
flex-direction을 column으로 지정하면 중심축은 y축, 교차축은 x축이 되는 것에 주의하자
flex-wrap
nowrap : 줄바꿈을 하지 않는다
wrap : 줄바꿈을 한다
wrap-reverse : 아이템들을 역순으로 줄바꿈한다
flex-flow
flex-direction 과 flex-wrap을 같이 사용할 수 있는 단축 속성
flex-flow : column, wrap (아이템들을 세로 방향으로 배치하고 부모 요소의 크기를 넘어가면 줄바꿈한다)
😄 code2. justify-content,
align-items, align-content
/* HTML */
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
/* CSS */
.container {
display: flex;
/* 아이템을 중심축 기준 가운데 정렬 */
justify-content: center;
/* 아이템을 교차축 기준 가운데 정렬 */
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: black;
margin: 10px;
}justify-content
flex-start : 아이템들을 시작점 기준 정렬 (중심축)
flex-end : 아이템들을 끝점 기준 정렬 (중심축)
center : 아이템들을 가운데 정렬 (중심축)
space-between : 첫번째, 마지막 아이템은 좌우 끝에 붙이고 남은 아이템들은 동일한 간격을 부여해서 정렬 (중심축)
space-around : 각 아이템마다 동일한 둘레 부여해서 정렬 (중심축)
space-evenly : 모든 아이템들을 동일한 간격 부여해서 정렬 (중심축)
위에서도 말했지만 flex-direction을 column으로 지정하면 중심축은 y축, 교차축은 x축으로 바뀐다
align-items
stretch : 아이템들이 교차축 방향으로 끝까지 늘어남 (교차축)
flex-start : 아이템들을 시작점 기준 정렬 (교차축)
flex-end : 아이템들을 끝점 기준 정렬 (교차축)
center : 아이템들을 가운데 정렬 (교차축)
baseline : 아이템들을 텍스트 베이스라인 기준 정렬 (교차축)
align-content
stretch : 아이템들이 교차축 방향으로 끝까지 늘어남 (교차축)
flex-start : 아이템들을 시작점 기준 정렬 (교차축)
flex-end : 아이템들을 끝점 기준 정렬 (교차축)
center : 아이템들을 가운데 정렬 (교차축)
space-between : 첫번째, 마지막 아이템은 좌우 끝에 붙이고 남은 아이템들은 동일한 간격을 부여해서 정렬 (교차축)
space-around : 각 아이템마다 동일한 둘레 부여해서 정렬 (교차축)
space-evenly : 모든 아이템들을 동일한 간격 부여해서 정렬 (교차축)
😄 code3. basis, grow, shrink, flex
/* HTML */
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
/* CSS */
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: black;
margin: 10px;
/* 아이템 크기 200px */
flex-basis: 200px;
/* flex-basis제외한 여백을 1의 비율만큼 가져감 */
flex-grow: 1;
/* 부모 요소 크기 상관 없이 고정 크기 가짐 */
flex-shrink: 0;
}flex-basis
flex 아이템의 크기를 지정할 수 있다. 다른 속성과는 다르게 자식 요소에 부여한다 (우선순위는 flex-basis > width)
단위는 %, px, em 등 다양하게 사용 가능
flex-grow
default 값인 0보다 큰 값으로 지정되면 아이템의 flex-basis 값을 제외한 여백을 flex-grow에 지정한 숫자의 비율만큼 가져간다
flex-shrink
default 값은 1이므로 0으로 지정시 부모 요소의 크기가 변화하더라도 고정폭을 가질 수 있다
flex
flex : 1 1 auto 지정시
flex-grow : 1, flex-shrink : 1, flex-basis : auto
flex-basis 생략시 0
😄 code4. align-self, order
order
지정한 숫자가 작을수록 먼저 배치되며 HTML의 구조가 바뀌는게 아닌 시각적으로만 바뀌기 때문에 주의해서 사용할 필요가 있다
align-self
align-content는 여러개를 교차축 정렬하고 align-self는 지정한 아이템만 교차축 정렬한다. 나머지 사용법은 동일하다 (우선권은 align-self > align-content)
😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍
