柔性盒中的垂直定位

Question

有一些固定尺寸的嵌入塊（材料圖標）應該垂直放置在流體塊內 - 一個在中間，另一個在底部。

下面是說明這樣一個例子：

body { 
 
    width: 100%; 
 
} 
 

 
.square-container { 
 
    position: relative; 
 
    padding-top: 100%; 
 
    background: #999; 
 
} 
 

 
.square { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 20%; 
 
    height: 20%; 
 
    background: #ddd; 
 

 
    align-items: center; 
 
    display: flex; 
 
    flex-direction: column; \t 
 
    justify-content: space-between; \t 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" type="text/css" rel="stylesheet"> 
 

 
<div class="square-container"> 
 
    <div class="square"> 
 
    <i class="material-icons">&nbsp;</i> 
 
    <i class="material-icons icon-1">local_see</i> 
 
    <i class="material-icons icon-2">grade</i> 
 
    </div> 
 
</div>

我想在這裏解決的一些問題。

一個是它包含額外的<i class="material-icons">&nbsp;</i>佔位符，使兩個圖標留在地方。

另一個是當容器足夠小時圖標不能有效地使用空間（a demo）。希望兩個圖標可以佔用佔位符佔用的空間而不是溢出。

這怎麼辦？

這主要是flexbox的問題，但如果在沒有flexbox的情況下可以達到相同的佈局，並且具有相同的靈活度，這也會很好。

Answer 1

我不會爲此使用flex，但在父元素和子元素之間創建相對/絕對關係，其中可以根據需要在相對父元素中設置絕對元素，如下所示。

在這種情況下，不需要像代碼中的「佔位符」元素。

請注意，我使用vw單位的寬度和高度的.square元素使其獨立於窗口高度。

html, body { 
 
    height: 100%; 
 
} 
 
.square-container { 
 
    background: #999; 
 
    height: 100%; 
 
} 
 
.square { 
 
    position: relative; 
 
    width: 20vw; 
 
    height: 20vw; 
 
    background: #ddd; 
 
} 
 
.icon-1 { 
 
position: absolute; 
 
top: 50%; 
 
left: 50%; 
 
transform: translate(-50%, -50%); 
 
} 
 
.icon-2 { 
 
position: absolute; 
 
bottom: 0; 
 
left: 50%; 
 
transform: translateX(-50%); 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" type="text/css" rel="stylesheet"> 
 

 
<div class="square-container"> 
 
    <div class="square"> 
 
    <i class="material-icons icon-1">local_see</i> 
 
    <i class="material-icons icon-2">grade</i> 
 
    </div> 
 
</div>

添加的註釋AFTER：

有一個Flexbox的解決辦法，也：刪除從佔位符元素的含量，並給它height: 1em和flex-shrink: 1;

body { 
 
    width: 300px; 
 
} 
 

 
.square-container { 
 
    position: relative; 
 
    padding-top: 100%; 
 
    background: #999; 
 
} 
 

 
.square { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 20%; 
 
    height: 20%; 
 
    background: #ddd; 
 
    align-items: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 

 
.placeholder { 
 
    height: 1em; 
 
    flex-shrink: 1; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" type="text/css" rel="stylesheet"> 
 

 
<div class="square-container"> 
 
    <div class="square"> 
 
    <i class="material-icons placeholder"></i> 
 
    <i class="material-icons icon-1">local_see</i> 
 
    <i class="material-icons icon-2">grade</i> 
 
    </div> 
 
</div>

Answer 2

你好看到下面的代碼希望你是在找這個利用Flexbox，就只需要添加額外的彎曲性能

flex-wrap: wrap; 
justify-content: space-around; 
align-items: center; 

body { 
 
    width: 300px; 
 
} 
 

 
.square-container { 
 

 
\t display:flex; 
 
\t justify-content: flex-start; 
 
\t padding-top: 100%; 
 
    background: #999; 
 
    position: relative; 
 
} 
 

 
.square { 
 
    
 
    position:absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 20%; 
 
    height: 50%; 
 
    background: #ddd; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" type="text/css" rel="stylesheet"> 
 

 
<div class="square-container"> 
 
     <div class="square"> 
 
     <i class="material-icons icon-1">local_see</i> 
 
     <i class="material-icons icon-2">grade</i> 
 
     </div> 
 
    </div>