오즈코딩스쿨/[HTML,CSS]
06. Chapter6. CSS 중급 속성 다루기 (9 플렉스 실습)
by Sowon Kim
2025. 9. 1.
9️⃣
플렉스 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉스박스 레이아웃</title>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
}
ul{
display: flex;
padding: 0;
list-style-type: none;
height: 200px;
align-items: center;
/*
✅ flex container 인 경우에만 사용
flex-direction: row-reverse; = 주축-상하또는좌우변경
column-reverse; = 주축변경-상하또는좌우변경
flex-wrap: nowrap; = 배치방법(공간이 부족한 경우의 움직임)
row nowrap; = direction과 wrap의 단축키
justify-content: flex-start; = 시작쪽에 배치
justify-content: flex-end; = 끝쪽에 배치
justify-content: center; = 중간에 배치
justify-content: space-between; = 양끝 정렬, 동일 여백
justify-content: space-around; = 동일 여백 (양끝은 여백의 반씩 나눠진다)
justify-content: space-evenly; = 양끝 여백까지 동일 여백
✅ 교차축 배치 (교차축에 하나이상 없기에 여백은 없음 (space(X))
align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
*/
}
/*
li:nth-child(3){
✅ align-self 는 (예로 'nth-child' 를 이용하여) 한 아이템만 적용
align-self: flex-start;
}
*/
li{
background-color: tomato;
}
li:nth-child(2n){
background-color: teal;
}
li:nth-child(2n-1){
flex: 1 1 120px;
/*
flex-grow: 1; = 남은 여백을 활용해 크기가 커짐 (숫자는 우선순위)
flex-shrink: 2; = 공간이 좁아질 수록 더 작아짐 (숫자는 우선순위)
flex-basis: 100px; = 적은 수치부터 남은 여백을 활용해 커짐
flex: 1 1 120px; = grow shrink basis 의 단축어
*/
}
</style>
</head>
<body>
<h2>유노코딩이 집앞 강가에서 목격한 동물들</h2>
<ul>
<!--
플렉스 아이템은 = ul 에 display:flex 가 적용된 상황
플렉스 컨테이너로서의 역할은 하지 않는다! = il 에 flex가 적용되지 않는다, 적용하고 싶다면
il 에 display:flex를 따로 적용해야 한다.
-->
<li>물오리</li>
<li>물까치</li>
<li>고라니</li>
<li>노룩뱀</li>
<li>너구리</li>
</ul>
</body>
</html>
