[CSS 01-2-2] flex-wrap 한 칸 띄고 다음 줄로 넘어가는 현상...
연습 삼아 작성해 봤는데 flex-wrap: wrap;을 적용한 박스 내부 아이템들이 한 줄 줄바꿈한 것처럼 보입니다... 아래 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>flex-wrap 연습</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.container1 {
width: 300px;
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: skyblue;
margin-bottom: 10px;
gap: 10px;
}
.item {
width: 90px;
height: 100px;
border: 1px solid black;
border-radius: 10px;
}
.container2 {
width: 300px;
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
background-color: tomato;
gap: 10px;
}
</style>
</head>
<body>
<div class="container1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>Answer 2
0
안녕하세요! 수뼈님!
현재 수뼈님께서는 제대로된 css를 작성하고 계시답니다!^^
1. 아주 기본상태(부모는 width: 300 / height: 300 , 자식은 width: 90 / height: 100 )일 때.
2. 부모 flexbox 내에 자식이 많아지면서 더 이상 공간이 없어지면?
자식들이 조금씩 줄어드는 현상이 발생!
사이즈를 줄어들게 만들고 싶지 않아요!
차라리 줄바꿈 할래요! => flex-wrap: wrap
따라서, flexbox의 기본 원리에 따라, 현재까지의 코드는 모두 정상적으로 작동하고 있는 것이랍니다!^^
0
제가 말한 건 줄바꿈 될 때 왜 한 칸 띄워져서 되는 건지에 대한 질문이었습니당... 이 사진처럼 다음 줄로 넘어간 게 윗줄 박스들과 어느 정도 가까이 붙어 있어야 맞는 거 아닌가용...?
0
안녕하세요! 수뼈님!
이해했습니다!^^
flex 라는 것은 default 값이 유연하게 늘리기 => stretch가 기본 속성인데요!
따라서, align-items를 명시하지 않는 경우, stretch가 기본값이랍니다.
align-items: stretch
=> 하위 자식 item들의 높이를 지정하지 않으면 쭉 늘어나게됨
위 그림이 기본값이므로, 여기서 item의 높이를 변경하시면, 그 자리에서 그대로 각 item별 높이만 변경되는 것이랍니다!
가운데 빈공간은 gap: 10px
0
안녕하세요, 인프런 AI 인턴입니다. 수뼈님.
현재 flex-wrap: wrap; 속성을 사용한 container2 안의 아이템들이 줄바꿈 현상이 발생하는 이유는 container2의 너비(300px)와 내부 아이템들의 너비(90px)에 gap: 10px이 추가되었기 때문입니다. 이로 인해 한 줄에 들어가는 아이템 수가 줄어들며, 공간이 충분하지 않게 되어 다음 줄로 넘어가게 됩니다.
container2의 너비(300px)를 고려하고, 각 아이템의 너비(90px)와 gap: 10px을 더하면, 한 줄에 최대 2-3개의 아이템이 들어갈 수 있습니다. 그러나 세 번째 아이템이 공간을 초과하게 되면 자동으로 다음 줄로 넘어가면서 줄바꿈 현상이 발생합니다.
만약에 이 문제를 해결하고 싶다면 gap 값을 조정하거나 container2의 너비를 늘려서 아이템들이 한 줄에 더 많이 배치되도록 할 수 있습니다.
아래는 관련 토픽의 유사한 질문과 답변을 확인할 수 있는 URL입니다. 비슷한 문제를 다루며, 다양한 해결 방법을 제시하고 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
강의자료가 너무 이쁘네요... 어떻게 만드셨는지 알 수 있을까요..?
0
132
1
반응형웹에서 가로 스크롤 생기지 말고 테이블이 밑으로 떨어지게 하려면?
0
41
1
nested 리스트일때 <ul> bullet 스타일 바꾸는 방법
0
197
2
border 선 겹침 현상
0
168
1
3-2강 코드로 작성하지 않은 박스가 표시됩니다...?
0
158
2
absolute관련 질문 있습니다.
0
105
2
rightSectionWrapper,leftSectionWrapper 중앙정렬 질문입니다!
0
147
2
과제 완료
0
254
2
2강 - Http 응답 데이터 - Html 질문
0
174
1
자바스크립트 함수가 실행되지 않습니다.
0
481
2
22강 연락처 추가하기 - css 파일 경로 지정
0
265
1
CreateView에 html 코드가 어떻게 적용되는 걸까요?
0
371
1
html input 태그에 readonly 속성 넣었을 때 배경이 회색으로 바뀌는 이유가 무엇인가요?
0
2714
1
leftSectionWrapper와 rightSectionWrapper 중앙 정렬
0
513
1
Mini Quiz 질문
0
284
2
animation 질문- 하나의 @keyframes로 특정 이벤트없이 한번, hover이벤트시 한번 적용 방법 문의.
0
511
2
CSS정렬 - 회원가입 폼 만들기 과제 질문
0
1002
2
중간중간 html 작성 코드가 안보여서 불편합니다.
0
580
1
item.html에 "저장완료!" 문구 넣을 때 질문 있습니다
1
599
1
container의 이름을 class로 주는 이유
0
492
1
비밀번호가 틀렸을 때 사라지지 않게 하려면 어떻게 수정해야하나요?
0
503
1
wrapper__right__body요소 안에 iframe태그를 사용하는 이유가 궁금합니다.
0
375
1
CSS관련 질문
0
522
1
margin 대신 padding을 자주 쓰는 이유
0
698
1