Question

我有一个静态页面的移动版本看起来不错（虽然我不确定HTML设置是否理想）。我从.product-info课程中取出了按钮，因此我可以使用flexbox的order属性并将其移至移动设备上的产品图片下方。但是，这让我不确定如何设计桌面版本。我试图获得.product-info（蓝色），＆＃39;得到＆＃39;按钮和.store-info（绿色）各自在各自的行上。在不影响移动布局的情况下，使用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
    }
}

Answer 1

只需在桌面媒体查询中将Flexbox容器设置为flex-direction: column。

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

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

使用flexbox

1 个答案: