반응형
1. flex-wrap: wrap;
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
font-size: 240px;
color: white;
height: 300px;
background-color: teal;
}
#second {
background-color: wheat;
}
</style>
</head>
<body>
<div>1</div>
<div id="second">2</div>
<div>3</div>
</body>
</html>
결과
창의 크기를 조절해도 width 300px이 유지된다
2. flex-wrap: nowrap;
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
font-size: 240px;
color: white;
height: 300px;
background-color: teal;
}
#second {
background-color: wheat;
}
</style>
</head>
<body>
<div>1</div>
<div id="second">2</div>
<div>3</div>
</body>
</html>
결과
처음에는 width 300px 로 보이지만
창을 줄이면 width 300px 값을 무시하게됨.
(참고) flex는 width를 초기 사이즈로만 여김
(또 참고) flex-wrap: wrap-reverse; 값도 있음.
ㄴ니꼬가 평생 5번 정도 밖에 안 써봤다는 태그.. (화면 줄일 때 밑에 있는게 위로 감)
반응형
'2. CSS' 카테고리의 다른 글
| CSS position fixed 사용하기 2 (0) | 2024.11.24 |
|---|---|
| CSS position fixed 사용하기 (0) | 2024.11.24 |
| CSS flex 태그: 자식 엘리먼트를 flex 컨테이너로 만들기 (0) | 2024.11.19 |
| CSS flex-direction 사용하기 (0) | 2024.11.19 |
| CSS flex box(플렉스 박스)의 특징2 (0) | 2024.11.19 |