使用flexbox對齊項目

我有一個靜態頁面的移動版本看起來不錯（雖然我不確定HTML設置是否理想）。我從.product-info課中拿出按鈕，這樣我就可以使用flexbox的order屬性，並將其移動到移動設備上的產品圖像下方。但是，這讓我不確定如何去設計桌面版本的樣式。我試圖在他們各自的獨立線路上獲得.product-info（藍色），'get'按鈕和.store-info（綠色）。在不影響移動設備佈局的情況下，使用Flexbox爲桌面版本構建和設計風格的最佳方式是什麼？謝謝！使用flexbox對齊項目

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

只需設置你的Flexbox的容器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％，強制其他元素包裝到下一列。 –

使用flexbox對齊項目

回答

相關問題