반응형(@media (max-width:1100px)), 헤더(hd_wrapper)의 아이템 배열열을 역방향으로 바꾸고 싶습니다.

반응형(@media (max-width:1100px)), 헤더(hd_wrapper)의 아이템 배열열을 역방향으로 바꾸고 싶습니다.

QA

반응형(@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

978180634_1716877825.5178.png

 

이 화면을 원하는게 맞나요 ?


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; 
}

마진 라이트 삭제하세요 (마진만)

-
-  #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).
-

978180634_1716879088.5161.png

 

363 라인에 있습니다. 확인해보세요

답변을 작성하시기 전에 로그인 해주세요.
전체 21
QA 내용 검색
filter #500 ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT