改行の項目を整列する

Question

自分のボタンを自分の入力の下に揃えたいと思います。私は両方の要素にwidth: auto;を持っています。私はそれをモバイルフレンドリーにするためにメディアクエリを使用していますが、私はそれを動作させることはありません。入力とボタンはお互いの下に揃っていません。 Hereは実際の例のためのフィドルです。

Htmlの

<div class="card-zipcode"> 
    <label>Postcode</label> 
    <div class="card-group"> 
     <input type="text" class="input-zipcode"> 
     <button class="btn-postnl" id="bekijken" type="submit">Bekijken</button> 
    </div> 
</div> 

のCss

.card-group { 
display: flex; 
justify-content: space-between; 
} 

.card-group input { 
width: auto; 
} 

.btn-postnl { 
display: inline-block; 
position: relative; 
height: 40px; 
width: auto; 
margin: 0; 
padding: 0 20px; 
vertical-align: top; 
border: 1px solid rgba(0, 0, 0, 0); 
background-color: #ED8C00; 
-webkit-appearance: none; 
outline: 0; 
line-height: 38px; 
font-size: 1em; 
font-weight: 300; 
color: #FFF; 
cursor: pointer; 
-webkit-transition: all .1s ease-out 0s; 
transition: all .1s ease-out 0s; 
border-radius: 3px; 
} 

@media only screen and (max-width: 400px) { 
body { 
    background-color: #fff; 
} 

.card { 
    box-shadow: none; 
    margin-top: -1px; 
} 

.card-group { 

} 
} 

Answer 1

メディアクエリ内にこれを追加します。

.card-group { 
    flex-direction: column; 
} 

それはフレックス動作を変更し、フレックス編の項目として揃えるようになります列ではなく行として表示されます。あなたは相対的かつ完全にフレキシブルなすべてのものを維持したい場合は

JSFiddle

Answer 2

イタイGanorのアプローチは動作します。あなたも、あなたが以前持っていたレイアウトを維持したい場合はイタイのアプローチで@media使用して、このアプローチを使用する場合にのみ、特定のデバイスピクセルの変更を適用することができます

@media (min-width: 600px) { 
    .btn-postnl { 
      position: absolute; 
      margin: 60px 0px; 
    } 
} 

注：別の方法として、次のことを行うことができます幅が満たされる。