窗口大小变化时如何垂直或水平对齐图标

Question

当网页狭窄时1图像被接受。页面宽2时，图像被接受。但是3图片不被接受 考虑左侧的文本和右侧或网页的图标

如何使用CSS或任何前端技术来避免3情况？

添加html代码：

<div>
  <span width='80%'>Text here</span>
  <span width='20%'>icon1,icon2,icon3</span>
</div>

Answer 1

最简单的选择是使用flexbox：

#container {
  display: flex;
}

@media only screen and (max-width: 150px) {
  #container {
    flex-direction: column;
  }
}

/* unrelated to the solution */

#container img {
  object-fit: contain;
}

<div id="container">
  <img src="https://via.placeholder.com/32"/>
  <img src="https://via.placeholder.com/32"/>
  <img src="https://via.placeholder.com/32"/>
</div>

尝试resizing the window on Codepen来查看150px上的更改。