[TIL] CSS flex-wrap 적용 안됨

hanbyul.choi·2023년 5월 17일
0

[TIL]

목록 보기
3/39
post-thumbnail

문제점

사진과 같이 팀소개 프로젝트 중 방명록 섹션에서 문제가 생겼다.

제일 좌측에는 처음 "comment"를 작성 하는 곳이고 작성된 "comment"는 오른쪽에 이어서 붙는다.

display : grid;로 구성하고 글작성 부분을 제외한 작성된 "comment"는$('.comment').empty를 사용하여 기존요소 삭제 후 다시 데이터를 불러와 나타나게 했다.
(페이지 새로고침을 하지 않고 동작하기 위해서)

그러나
grid 사용 시 empty()기능에서 글작성 부분을 제외해야했기 때문에 grid적용되지 안게 빼내었지만 그리드위에 적용 되고 옆으로 그리드가 붙지 않았다.

그래서
flex를 사용하고 wrap을 적용시켜 아래에 이어 붙이려했다.
결과는 실패....

원인

조원에 도움을 받아 확인 시 글작성 부분과 방명록을 가로로 flex 배치하면 이후에 오게되는 gridwrap은 구조적으로 적용 불가.

삭제나 수정 시 새로고침을 안하고 방명록을 불러오는 방법은 올바르지 않고 추가된 부분만 get하는 걸로 변경해야함.

그리고 수정 시 굳이 다시 불러올 필요는 없음.

느낀점

그다지 효율적이지도 않은 방법으로 계속 시도해 보던게 문제인듯 하다.

결론,

1. 조금 더 생각해보면 다른 좋은 방법들이 존재한다!

2. 작은 해결책을 생각하기 보다 큰 틀에서의 해결책을 생각해보자.

3. 혼자 생각하고 알아보면 쉽게 풀리지 않는다. 도움을 요청하자!

0개의 댓글