別々のコンテナ内の2つのdivを常に整列させる

Question

フレックスボックスの行折り返しに2つのDIVがあります。 それで、私は常に整列したい2つのボタンを持っています。

.main-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
} 
 
.container { 
 
    flex: 1; 
 
    
 
    flex-flow: column wrap; 
 
    justify-content: center; 
 
    border: 1px solid gray; 
 
    border-radius: 5px; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    min-width: 300px; 
 
} 
 
.container> * { 
 
    flex: 1; 
 
} 
 
button { 
 
    width: 100%; 
 
}

<div class="main-container"> 
 

 

 
    <div class="container"> 
 
    <h2> 
 
     Container 1 
 
    </h2> 
 
    <div class="inner-container"> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
    </div> 
 
    <button> 
 
     Click me 
 
    </button> 
 
    </div> 
 
    <div class="container"> 
 
    <h2> 
 
     Container 2 
 
    </h2> 
 
    <div class="inner-container"> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test and this is a long text to wrap around. So let it be</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
    </div> 
 
    <button> 
 
     Click me 
 
    </button> 
 
    <div class="more-container"> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
    </div> 
 
    </div> 
 
</div>

モバイル解像度では、それは

デスクトップで のようになります。レッサー解像度で

のようになります。 0

JSFIDDLE：https://jsfiddle.net/d69jcpnz/

Answer 1

その仲間が

.main-container { 
 
    display: flex; 
 
    flex-flow: row nowrap; /*modification here*/ 
 
    justify-content: center; 
 
} 
 
.container { 
 
    flex: 1; 
 
    
 
    flex-flow: column wrap; 
 
    justify-content: center; 
 
    border: 1px solid gray; 
 
    border-radius: 5px; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    min-width: 300px; 
 
} 
 
.container> * { 
 
    flex: 1; 
 
} 
 
button { 
 
    width: 100%; 
 
} 
 

 

 
/*add here*/ 
 
@media screen and (max-width: 660px) { 
 
    .main-container { 
 
    flex-flow: row wrap; 
 
    } 
 
}

Answer 2

私はあなたの目標を理解していなかったOK SRY仲間は、これを試して試してみてください：

.main-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
} 
 
.container { 
 
    flex: 1; 
 
    flex-flow: column wrap; 
 
    justify-content: center; 
 
    border: 1px solid gray; 
 
    border-radius: 5px; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    min-width: 300px; 
 
} 
 
.container> * { 
 
    flex: 1; 
 
} 
 
button { 
 
    position: relative; /* position changed */ 
 
    width: 100%; 
 
} 
 
button.first { /* added style here */ 
 
    top: 5.65rem; 
 
}

<div class="main-container"> 
 

 

 
    <div class="container"> 
 
    <h2> 
 
     Container 1 
 
    </h2> 
 
    <div class="inner-container"> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
    </div> 
 
    <button class="first"> <!-- added class here --> 
 
     Click me 
 
    </button> 
 
    </div> 
 
    <div class="container"> 
 
    <h2> 
 
     Container 2 
 
    </h2> 
 
    <div class="inner-container"> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test and this is a long text to wrap around. So let it be</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
    </div> 
 
    <button> 
 
     Click me 
 
    </button> 
 
    <div class="more-container"> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
     <div>test</div> 
 
    </div> 
 
    </div> 
 
</div>

結果は、ご希望の結果と似ています。

これは大丈夫ですか？