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;	
  justify-content: space-between;	
}

<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"> </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>

评论后添加：

还有一个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

Hello请参阅下面的代码，希望您使用的是Flexbox，只需添加额外的flex属性

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

body {
  width: 300px;
}

.square-container {

	display:flex;
	 justify-content: flex-start;
	  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>

在flexbox中垂直定位

2 个答案: