フレックスボックスでアイテムを整列する

静的なページのモバイル版が好きです（HTML設定が理想的かどうかはわかりませんが）。私は.product-infoクラスからボタンを取り出して、flexboxのorderプロパティを使用して、モバイル上の製品イメージの下に移動することができました。しかし、これは私に、デスクトップ版のスタイリングについてどうやって行くのかを私にはわかりません。 .product-info（青色）、「取得」ボタン、.store-info（緑色）をそれぞれ別々の行に表示しようとしています。フレックスボックスを使用してモバイル版のレイアウトに影響を与えずにデスクトップバージョンの構造とスタイルを設定する最良の方法は何ですか？ありがとう！フレックスボックスでアイテムを整列する

HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="UTF-8"> 
    <title>Snapshelf</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    <link rel="stylesheet" href="product-page.css" type="text/css"> 
    </head> 

    <body> 

    <!-- Navigation --> 
    <nav class="header navbar navbar-light bg-faded"> 
     <div class="nav navbar-nav container"> 
     <a class="nav-item nav-link active" href="#">Snapshelf <span class="sr-only">(current)</span></a> 
     <a class="nav-item nav-link" href="#" style="float: right">Store Account</a> 
     </div> 
    </nav> 

    <!-- Holds product image and information --> 
    <div class="product container"> 

     <!-- Displays front or back of product --> 
     <div class="product-image"> 
     <img src="front.jpg" class="main-image img-fluid" alt="" /> 
     <img src="back.jpg" class="secondary-image" alt=""/> 
     </div> 

     <!-- Displays product information --> 
     <div class="product-info"> 
      <p class="brand-name"><b>Brand Name</b></p> 
      <p class="product-desc">Product Name</p> 
      <p class="price">$100</p> 
     </div> 

     <!-- Get button --> 
     <div> 
     <button class="get-button btn btn-default btn-lg">Get</button> 
     </div> 

     <!-- Store information --> 
     <div class="store-info"> 
     <div> 
      <b>From</b><br> 
      Store Name 
     </div> 
     <div style="margin-top: 10px"> 
      <b>Where</b><br> 
      Store Location<br> 
      <a href="#">www.storeurl.com</a> 
     </div> 
     </div> 
    </div> 

    </body> 
</html>

CSS

/* Large screens */ 
@media only screen and (min-width: 768px) { 
    .body { 
     font-family: 'Roboto', sans-serif; 
    } 
    .header { 
     margin-bottom: 40px; 
     border: 1px solid green; 
    } 
    .product { 
     display: flex; 
     border: 1px solid red; 
    } 
    .product-info { 
     border: 1px solid blue; 
    } 
    .get-button { 
     margin-top: 20px; 
     border-radius: 2px; 
    } 
    .product-image { 
     display: flex; 
     flex-direction: column; 
    } 
    .main-image { 
     height: 500px; 
     width: 500px; 
     margin-right: 20px; 
    } 
    .secondary-image { 
     height: 150px; 
     width: 150px; 
     margin-top: 20px; 
    } 
    .price { 
     margin-top: 10px 
    } 
    .store-info { 
     border: 1px solid green; 
     border-radius: 2px; 
     padding: 10px; 
     margin-top: 40px; 
     text-align: center 
    } 
}

出典

2016-12-05 maxwellgover

はちょうどあなたのデスクトップのメディアクエリでflex-direction: columnにあなたのフレキシボックスコンテナを設定します。

@media only screen and (min-width: 768px) { 

    .product { 
     display: flex; 
     flex-direction: column; 
     border: 1px solid red; 
    } 
}

出典

2016-12-05 17:56:11

すみません。私は異なる行であっても、製品イメージの右側にあることを意味しました。これにより、すべてが製品イメージの下に移動します。 – maxwellgover

@staxwell次に、これらの要素の新しいラッパーを作成するか、イメージを100％にしてメインコンテナに固定された高さを設定し、他の要素を次の列に折り返します。 –

フレックスボックスでアイテムを整列する

答えて

関連する問題