반응형(@media (max-width:1100px)), 헤더(hd_wrapper)의 아이템 배열열을 역방향으로 바꾸고 싶습니다.
본문
- 반응형(@media (max-width:1100px)), 헤더(hd_wrapper)의
-
- 아이템 배열열(https://policy.glitter.kr/qa_php/max-1100.png)을
-
- 역방향(flex-direction: row-reverse)으로 바꾸면
-
- 배열은 바뀌나(https://policy.glitter.kr/qa_php/row-reverse;-page.png),
-
- 간격조절(justify-content: space-between)이 안 됩니다.
-
- 그런데, @media (min-width:1101px), 1101px 이상의 화면에서는
-
- 잘 반응합니다(https://policy.glitter.kr/qa_php/row-reverse-css-2.png).
- . . . . . .
- 저의 default.css는 아래와 같습니다.
.
#hd_wrapper { max-width: 1200px; margin: 0 auto; position: relative;
background: var(--primaryColor); border-radius: 40px; height: 60px; display: flex;
justify-content: space-between; align-items: center; padding: 0px 25px; }
.
@media (min-width:1101px) {
.
#hd_wrapper { flex-direction: row-reverse; max-width: 1200px; min-width: 1200px;
width: 100%; padding: 0px 30px;}
.
}
@media (max-width:1100px) {
.
#hd_wrapper { width: 100%; padding: 0px 18px;}
/*
#hd_wrapper { display: flex; flex-direction: row-reverse; justify-content: space-between;
align-items: flex-start; width: 100%; padding: 0px 18px;}
*/
.
.
.
-
- 여러모로 시도하여 보았으나 초보에겐 한계인 듯하여
-
- = = = 도움을 청합니다. = = =
-
답변 3
이 화면을 원하는게 맞나요 ?
default.css : 363라인
@media (max-width: 1100px) {
#opener_header_search {
margin: -5px 0 0 auto;
}
삭제하세요 (마진만)
default.css :369라인
@media (max-width: 1100px) {
#opener_aside{
margin-right: auto;
}
마진 라이트 삭제하세요 (마진만)
default.css 에 해당 라인 가면 저 코드가 있습니다. 다른거 삭제 하지마시고
제가 삭제하라는 것만 삭제 해주세요
-
- #opener_header_search {margin: -5px 0 0 auto;} 값은 없습니다
#header_search { display: none; position: absolute; bottom: -64px; left: 0;
width: 100%; height: 60px; z-index: 9999; box-shadow: 0px 3px 6px #00000032; }
-
- 수정후, 이렇습니다(https://policy.glitter.kr/qa_php/row-reverse-css-4.png).
- - - - -
-
- 제가 잘 못 보았습니다.
-
- 찾았습니다.
-
- 감사합니다. 잘 작동합니다(https://policy.glitter.kr/qa_php/row-reverse-css-5.png).
-
- 행복하세요 ~~~
-
flex-grow: 1
-
- 미니님a 의 말씀을 인지를 못 하고있습니다.
-
-
.
#hd_wrapper {
flex-direction: row-reverse; width: 100%; justify-content: space-between;
padding: 0px 18px; flex-grow: 1;
}
.
-
- 위치는 바뀌였으나 여백 조정( justify-content: space-between)이
-
- 이렇습니다 (https://policy.glitter.kr/qa_php/row-reverse-css-3.png).
-
flex 준 자식 요소에 flex-grow 1 주세요 그럼 비트윈처럼 나열됩니다.
-
- 초보라 이해는 안 되지만 구글링 하여 보겠습니다.
-
363 라인에 있습니다. 확인해보세요
-
- 제가 잘 못 보았습니다.
-
- 찾았습니다.
-
- 감사합니다. 잘 작동합니다(https://policy.glitter.kr/qa_php/row-reverse-css-5.png).
-
- 행복하세요 ~~~
-