如何消除兩行Flex項目之間的巨大不需要的邊距？

html, body { 
 
    height: 100%; 
 
} 
 

 
.flex{ 
 
    min-height: 100%; 
 
display: flex; 
 
justify-content:center; 
 
flex-flow: row wrap; 
 
align-items: center; 
 
    
 
background: red; 
 
} 
 
    
 
.coloring { 
 
    background:#CCC; 
 
    border-radius:7px; 
 
    padding: 20px; 
 
    margin: 0px; 
 
} 
 

 
.Projects{ 
 
    order: 1; 
 
    flex: 0 1 100%; 
 
} 
 

 
.Tribute{ 
 
    order: 2; 
 
    flex: 1 1; 
 
} 
 

 
.Portfolio{ 
 
    order: 3; 
 
    flex: 1 1; 
 
}

<section class="flex"> 
 

 
    <div class="coloring Projects">Projects</div> 
 
    <div class="coloring Tribute">Tribute</div> 
 
    <div class="coloring Portfolio">Portfolio</div> 
 

 
</section>

當你縮小屏幕出現將是3行，現在有2個這樣巨大的不必要的空間。我不知道該怎麼辦。如果我消除align-items: center這些框將填滿整個頁面，但那不是我想要的。

來源

2017-01-09 user132522

請描述您的_do_想要的外觀（用英語或用模型）。我可以想到幾個不同的改變，可以消除彈性項目之間的差距，但它們都有不同的副作用。 – zwol

對齊之間多彎曲線由align-content財產處理 - 儘量align-content: center消除利潤率 - 看演示如下：

html, 
 
body { 
 
    height: 100%; 
 
} 
 
.flex { 
 
    min-height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-flow: row wrap; 
 
    align-items: center; 
 
    align-content: center; 
 
    background: red; 
 
} 
 
.coloring { 
 
    background: #CCC; 
 
    border-radius: 7px; 
 
    padding: 20px; 
 
    margin: 0px; 
 
} 
 
.Projects { 
 
    order: 1; 
 
    flex: 0 1 100%; 
 
} 
 
.Tribute { 
 
    order: 2; 
 
    flex: 1 1; 
 
} 
 
.Portfolio { 
 
    order: 3; 
 
    flex: 1 1; 
 
}

<section class="flex"> 
 
    <div class="coloring Projects">Projects</div> 
 
    <div class="coloring Tribute">Tribute</div> 
 
    <div class="coloring Portfolio">Portfolio</div> 
 
</section>

來源

2017-01-09 17:45:00 kukkuz

這是完美的。 – user132522

只有你有刪除

分鐘高度從.flex分類

來源

2017-01-09 17:47:35 Ajay

如何消除兩行Flex項目之間的巨大不需要的邊距？

回答

相關問題