使用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对齐项目

回答

相关问题