먼저, 이전에 설명했던 메인축 방향의 정렬은 "justify" 수직축(교차축)방향의 정렬은 "align"임을 기억하자.
justify-content
justify-content에는 flex-start(기본값) / flex-end / center / space-betweeen / space-around / space-evenly가 있다.
<style>
.wrap {
padding: 10px;
margin: 200px 50px;
background-color: lightblue;
display: flex;
justify-content: flex-start;
}
.wrap > div {
width: 100px;
height: 100px;
color: black;
font-weight: bold;
font-size: large;
text-align: center;
}
</style>
<body>
<div class="wrap">
<div style="background-color: red">가나다라</div>
<div style="background-color: green">마바사아</div>
<div style="background-color: blue; color: white">자차카</div>
<div style="background-color: yellow">타파하</div>
</div>
</body>
flex-start는 기본으로 설정된 값으로 row일 때는 왼쪽, column일 때는 위를 시작점으로 정렬한다.
flex-end는 끝점으로 정렬한다. row일 때는 오른쪽, column일 때는 아래가 기준이다.
center는 가운데로 내용물을 정리한다.
space-between은 내용물들 사이에 균일한 간격을 만들어 준다.
space-around는 내용물의 둘레에 균일한 간격을 만들어 준다.
space-evenly는 내용물들의 사이와 양 끝에 균일한 간격을 만들어준다. 다만, 이 속성은 IE와 Edge에 지원되지 않는다.
align-items
align-items는 수직축 방향으로 내용물들을 정렬하는 속성이다.
flex-start(기본값) / flex-end / center / stretch가 존재한다.
flex-start와 flex-end는 보이는 대로 수직축 시작점을 맨 위와 맨 아래로 정하는 것이다.
center은 중앙을 기준으로 정렬한다.
stretch는 내용물의 height가 따로 정해져있지 않을 때 감싸는 태그의 높이를 꽉 채우도록 내용물의 높이를 늘린다.
추가적인 속성은 딱히 써본적이 없어 작성하지 않도록 한다.
확실히 직접 코드를 만져보며 화면을 확인하니 더 이해가 잘 되는 것 같다.
display: flex는 정말 자주 사용하는 코드이므로 헷갈릴 때마다 확인한다면 큰 도움이 될 것이라고 생각한다.
'2차 공부 > TIL' 카테고리의 다른 글
| 24.05.31 배열과 연결 리스트(NodeList) (0) | 2024.05.31 |
|---|---|
| 24.05.30 TDZ와 Hoisting, var let const (1) | 2024.05.30 |
| 24.05.28 display: flex (0) | 2024.05.28 |
| 24.05.27 React 트랙을 신청한 이유 (0) | 2024.05.27 |
| Prop Drilling이란? (0) | 2024.05.14 |