데스크톱과 모바일 사이에 공간을 두는 방법?

Question

지금은 justify-content: center;으로 flex를 사용하고 있고 B 구성 요소에는 왼쪽 패딩이 있습니다. 일시적인 해킹입니다. 제대로 작동하려면 어떻게해야합니까?

컨테이너가 커지면 가운데에 공백을 넣고 가운데에 놓으십시오. 작을 때, 나는 그들에게 서로의 위로 가도록하고 싶습니다.

참고 :

2 개 항목을 중심으로하는 대형 화면에서
• 사이의 차이가 있습니다.
• 예를 들어 데스크톱에서 래퍼를 작게 만들 수 있으므로 화면 크기를 기반으로해서는 안됩니다.
• 구성 요소 미디어 쿼리와 같은 JS 솔루션이 없습니다.

해결책 중 하나는 https://www.npmjs.com/package/react-element-query 일 수 있지만 JS를 사용합니다.

미디어 쿼리는 https://jsfiddle.net/t4j6z7og/

Answer 1

가 왜 단순히 미디어 쿼리의 사용은 작은 폭으로 flex-direction: column로 교체하십시오 할 수 있도록 일 때문에, 그리고 마진을 교환하지 않습니다 Bmargin-left to margin-top?

이 다음 예
(사이드 바이 사이드 뷰 '실행 코드'다음 '전체 페이지'를 히트)에서 볼 수있다 :

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.a, .b { 
 
    width: 300px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
.b { 
 
    margin-left: 20px; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    .container { 
 
    flex-direction: column; 
 
    } 
 
    
 
    .b { 
 
    margin-left: 0; 
 
    margin-top: 20px; 
 
    } 
 
}

<div class="container"> 
 
    <div class="a">A</div> 
 
    <div class="b">B</div> 
 
</div>

희망 이게 도움이됩니다! :)