FlexboxとFlex Wrapで異なるデバイスで問題が発生する

flexboxを使用して次のレイアウトを取得しようとしていますが、2つのdivコンテナが隣り合っています。最初のdivには6つのボックスがあり、それらは3でなければならず、次の行に折り返します。 2番目の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％を占有し、その容器（body）を行うことで、そのようflex-basis: 50%を設定することによって、互いに隣にされていますフレックスコンテナ。

画面の最大幅が768px以下の場合に、メディアクエリを使用してスタイルを変更します。要素が垂直方向にスタックするように、コンテナのflex-directionをcolumnに変更します。次に、flex-basisは100％に設定されているため、各要素は列全体を占有します。また、2つの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

のおかげ？ディスプレイを使用しているにもかかわらず、互いに隣り合っているように見えますが、それぞれのコンテナにフレックスがありますか？ –

いいえ、そうではありません。 'box-container'を' container'を基準にしてどのように配置したいのか分かりませんでした。 – Mark

ありがとうございました。私は、モバイルとタブレットの上に積み重ねられ、次にデスクトップ上にお互いに隣り合うようにしたいと思います。ありがとうございました。 –

FlexboxとFlex Wrapで異なるデバイスで問題が発生する

答えて

関連する問題