整版页面/屏幕FLEXBOX布局

我正在使用flexbox方法进行布局，我试图实现。我已经阅读了文档，并且在最近的一个项目中一直在玩弄它。但是我很挣扎（我不确定这个常见问题，还是我没有一个像样的解决方案）。作为标题状态，我试图实现一个完整的页面布局，其中包含8个均等比例的屏幕（2行4个div或2个div的4列）。整版页面/屏幕FLEXBOX布局

我已经在一定程度上做到了这一点，但真正的问题是放置在divs本身的图像。如果我使用“vh”和“vw”单位来调整图像/ div的大小，当浏览器调整大小时，它们会保持与窗口成比例的关系，但是图像真的偏斜并且变得很糟糕。

如果我没有声明vh/vw单位并使用％代替图像保持正确的大小，但div变小。

我试图实现全屏布局，8个div和图像垂直或水平调整大小时始终与窗口成比例。

这是我的视图文件;

这是我的html;

<div id="section-two" class="section-wrapper"> 
    <div class="parent-container"> 
     <div class="child"> 
      <img class="feature-image" ng-src="/assets/01_RETAIL_DESIGN.jpg" /> 
     </div> 
     <div class="child"> 
      <img class="feature-image" ng-src="/assets/02_BRANDING.jpg" /> 
     </div> 
     <div class="child"> 
      <img class="feature-image" ng-src="/assets/03_STRATEGIC_INSIGHTS.jpg" /> 
     </div> 
     <div class="child"> 
      <img class="feature-image" ng-src="/assets/04_COMMERCIAL_MASTERPLANNING.jpg" /> 
     </div> 
     <div class="child"> 
      <img class="feature-image" ng-src="/assets/05_URBANREGENERATION.jpg" /> 
     </div> 
     <div class="child"> 
      <img class="feature-image" ng-src="/assets/06_FOODANDBEVERAGE_DESIGN.jpg" /> 
     </div> 
     <div class="child"> 
      <img class="feature-image" ng-src="/assets/07_TRANSPORT.jpg" /> 
     </div> 
     <div class="child"> 
      <img class="feature-image" ng-src="/assets/08_SIGNAGEANDWAYFINDING.jpg" /> 
     </div> 
    </div> 
</div>

这是我的CSS;

.section-wrapper { 
    height: 100vh; 
    width: 100vw; 
    border: 1px solid black; 
} 
.parent-container { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    font-size: 0; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    margin: 0; 
} 
.child { 
    -webkit-flex-grow: 1; 
    -ms-flex-positive: 1; 
    flex-grow: 1; 
    height: 50%; 
    width: calc(100% * (1/4)); 
    position: relative; 
} 
.feature-image { 
    height: 50vh; 
}

非常感谢。

来源

2016-06-15 Troy

根本不应该调整图像的大小。这就是网格的用途。我会在每个网格框中放置一个绝对定位的元素（以保持图像样式不同）并将图像设置为背景。类似这样的：

.child {position：relative;} .img-wrapper { position：absolute; top：0; right：0; bottom：0; left：0; background-position：center center; background-size：cover; }

<div class="child"> 
    <div class="img-wrapper" ng-style="{'background-image': '/assets/blah.jpg'}" /> 
    </div> 
</div>

您可能需要使用$sce并通过出于安全原因，一个控制器功能恢复的背景样式规则。

来源

2016-06-15 16:35:11 isherwood

该方法有效。在此之前，我在使用ng级作品时遇到了问题。 – Troy

-1

我是新来的代码，不知道如何使用您正在使用的方法来定位您的代码，但如果您想要，请尝试使用浮动或内嵌块定位您的内容。他们都为我工作得很好，我认为你会与他们取得成功。对于一个页面的一个非常好的网格轮廓去这里：http://learn.shayhowe.com/html-css/positioning-content/祝你好运！

〜Jacob

来源

2016-06-15 16:36:34

我试图使用flexbox属性来定位我的元素而不是浮动 – Troy

整版页面/屏幕FLEXBOX布局

回答

相关问题