somoim 프로젝트를 오랜만에 잡아서 댓글 api를 달고 있는 중에 모임 상세 페이지의 css에 어울리게 댓글 컨테이너를 넣으려고 했다.
댓글 컨테이너를 만들어서 댓글 입력칸과 댓글 리스트로 나누었는데 flex 박스로 이루어져 있어서 두개가 연달아 옆으로 붙어있었다. 입력칸이 100%의 너비를 갖고 그 아래로 댓글 리스트의 너비를 100%로 아래 쌓이게 하고 싶었는데 input 태그에 display: block, width: 100%을 지정해주면 될 거라고 생각했는데 적용되지 않았다.
스택오버플로우에서 찾아보니 댓글 컨테이너의 스타일에 flex-wrap: wrap; 을 줘야 했다.
그 다음 댓글 입력칸, 댓글 리스트 각각에 flex: 0 0 100%;를 주는 방법과 width: 100%;를 주는 방법이 있었다.
flex-wrap 속성에 대해 모른다면 해결할 수 없었을 것이다. 다시 한번 정리해야할 필요가 있다고 생각했다.
.commentsContainer {
border: 1px solid rgb(220, 220, 244);
padding: 10px;
display: flex;
// flex-wrap: wrap;
}
CSS
복사
(flex-wrap을 안 주고 flex-items에 width: 100%;를 줘도 각각이 끝에 붙어서 너비를 갖지 못하고 있다.)
.commentsContainer {
border: 1px solid rgb(220, 220, 244);
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.commentsEditor {
flex: 0 0 100%;
// width: 100%;
input {
}
}
.commentsList {
flex: 0 0 100%;
// width: 100%;
section {
padding: 0px;
background: black;
article {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 5px;
p {
word-break: keep-all;
}
}
}
}
CSS
복사
flex: 0 0 100%;
width: 100%;
둘중 하나를 지정해주면 너비 100%로 쌓이는 것을 볼 수 있다.
flex-wrap
CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.
