flex를 하면 li 간격이 자동으로 height에 맞춰집니다..
관련링크
본문
flex를 하고 flex-wrap을 했더니 li간격이 옆 이미지 높이에 맞춰집니다..
그런데 따로 설정한것도 없고 마진도 해보고 갭도 지워보고했는데ㅠㅠ
이유를 모르겠습니다... 개발자모드를 켜서 하나씩 꺼보았는데도 변동이 없습니다ㅠㅠ
어떤 코드를 추가 또는 변경해야 할지 여쭤봅니다
이거랑 무관할 것 같지만 그래도 설명드리자면 카페24쇼핑몰입니다ㅜㅜ
아래처럼 촘촘하게 하고 싶어서요
링크 들어가시면 위에는 통이미지이고
이를 토대로 아래 코드를 짜고 있습니다.
최하단 봐주시면 감사하겠습니다..( _ _ )
답변 2
기존에 갭 30을 10으로 변경
얼라인 컨텐츠 센터를 추가 해주세요
#partner .sec03 .k_partner_detail ul{
align-content: center;
gap: 10px;
}
로 변경하시면 원하는데로 되실 껍니다.
답변주신거 보고 적용했는데 저는 다르게 나옵니다..ㅠㅠ
적용한 내용 링크로 확인부탁드리겠습니다ㅠㅠ
align-items 로 하셨네요
align-content 입니다. 둘은 다릅니다.
ㅇㅁㅇ..정말감사합니다ㅠㅠ 초보같은 실수를 ..알려주셔서 감사합니다
해당요소에 클래스 하나 추가하고 선택자 우선순위 높여서 스타일 재정의 하시면 됩니다.
요소간 거리는 margin (또는, margin-bottom) 속성 이용하시면 됩니다.
기존 코드였습니다.
#partner .sec03 .k_partner_detail ul {width: 50%; gap: 30px;}
#partner .sec03 .k_partner_detail ul li {background: #d4e6e5; font-size: 22px; border-radius: 10px; display:flex; flex-wrap:wrap; width: 328px; height: 45px;
text-align: center; justify-content: center; align-items: center;}
클래스 추가하여 코드 추가하였습니다.
#partner .sec03 .k_partner_detail ul {width: 50%; gap: 30px;}
#partner .sec03 .k_partner_detail ul li {background: #d4e6e5; font-size: 22px; border-radius: 10px; display:flex; flex-wrap:wrap; width: 328px; height: 45px;
text-align: center; justify-content: center; align-items: center;}
#partner .sec03 .k_partner_detail .text_wrap {display: flex; flex-wrap:wrap;}
#partner .sec03 .k_partner_detail .text_wrap .text {margin-bottom:0;}
이렇게 해도 그대로입니다..선택자 우선순위를 어떻게 높혀야 할지..
중간에 더 구체적인 클래스 경로나 요소 경로를 추가하거나 스타일선언값 뒤에 !important 붙여주시면 됩니다. 위 코드 경우, ul에 클래스를 추가 후 ul.addclass 형식으로 경로명을 수정하면 현재 적힌 선택자보다 우선순위가 더 올라가겠죠.
더 자세한 건, https://homzzang.com/b/css-5 (선택자 우선순위)에 관해서 공부해 보세요.
답변감사드립니다! important도 해봤지만 되도록 안하려고해서..
또한 다른 원인이 있을거라고 생각했습니다. items가 아니고 content였습니다 도와주셔서 감사드립니다!