柔性盒中的垂直定位

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>