整版頁面/屏幕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佈局

回答

相關問題