Flexbox 및 Flex Wrap 서로 다른 장치에서 문제 발생

flexbox를 사용하여 다음 레이아웃을 얻으 려합니다. 두 개의 div 컨테이너가 옆에 있습니다. 첫 번째 div에는 6 개의 상자가 있고 3이어야하며 다음 줄로 넘어갑니다. 두 번째 div에는 텍스트가 들어 있습니다. 필자는 모바일 및 태블릿에 모든 기능을 쌓아 놓은 다음 데스크톱에서 위에 배치하려는 여러 가지 방법을 시도했습니다.Flexbox 및 Flex Wrap 서로 다른 장치에서 문제 발생

코드는 지금까지 있습니다 : 두 개의 컨테이너가 만들어집니다

<div class="container"> 
    <div class="child">Test</div> 
    <div class="child">Test</div> 
    <div class="child">Test</div> 
    <div class="child">Test</div> 
    <div class="child">Test</div> 
    <div class="child">Test</div> 
</div> 
<div class="box-container"> 
    <h1>hello</h1> 
</div> 


.container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 

    width: 800px; 
    border: 1px solid red; 
} 

.child { 
    flex: 0 0 calc(33.3% - 20px); 
    border: 1px solid blue; 
} 

.box-container{ 
    display:flex; 
}

출처

2017-09-28 Robert B

이 때문에 각 행의 50 %를 차지한다는 flex-basis: 50%을 설정하여 자신의 용기를함으로써 서로 옆으로 (body를) 플렉스 컨테이너.

화면의 최대 너비가 768px 이하인 경우 미디어 쿼리를 사용하여 스타일을 변경합니다. 요소가 수직으로 스택되도록 컨테이너의 flex-direction을 column으로 변경합니다. 그런 다음 flex-basis이 100 %로 설정되어 각 요소가 전체 열을 차지합니다. 또한 두 개의 div가 밖으로 정렬하는 의지에 대한

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    flex-basis: 50%; 
 

 
    border: 1px solid red; 
 
} 
 

 
.child { 
 
    flex: 0 0 calc(33.3% - 20px); 
 
    border: 1px solid blue; 
 
} 
 

 
.box-container { 
 
    display: flex; 
 
    flex-basis: 50%; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
@media only screen and (max-width: 768px) { 
 
    .container { 
 
     flex-direction: column; 
 
     flex-basis: 100%; 
 
    } 
 

 
    .child { 
 
     flex-basis: 100%; 
 
    } 
 

 
    body { 
 
     display: flex; 
 
     flex-direction: column; 
 
    } 
 

 
    .box-container { 
 
     flex-basis: 100%; 
 
    } 
 
}

<body> 
 
    <div class="container"> 
 
     <div class="child"> 
 
      Test 
 
     </div> 
 
     <div class="child"> 
 
      Test 
 
     </div> 
 
     <div class="child"> 
 
      Test 
 
     </div> 
 
     <div class="child"> 
 
      Test 
 
     </div> 
 
     <div class="child"> 
 
      Test 
 
     </div> 
 
     <div class="child"> 
 
      Test 
 
     </div> 
 
    </div> 
 
    <div class="box-container"> 
 
     <h1> 
 
      hello 
 
     </h1> 
 
    </div> 
 
</body>

출처

2017-09-28 22:36:51 Mark

감사합니다? 나는 디스플레이를 사용 함에도 불구하고 서로 옆에있는 것처럼 보이지 않으므로 각 컨테이너에 플렉스를 사용합니까? –

아니요, 그렇지 않습니다. 상자 컨테이너를 컨테이너에 상대적으로 배치하는 방법을 이해하지 못했습니다. – Mark

감사합니다. Mark, 모바일과 태블릿에 쌓아 놓은 다음 바탕 화면에서 서로 옆에 있도록하는 것이 좋습니다. 고맙습니다. –

Flexbox 및 Flex Wrap 서로 다른 장치에서 문제 발생

답변

관련 문제