不同分辨率下的不同区间对齐

Question

http://codepen.io/jiselllla/pen/MJzRjV

我已经使用了一个codepen来帮助我正在尝试做的事情。 对于初学者，我没有对这个网站进行硬编码，我在Webflow中做了这个，它是构建网站的一些交互式界面，然后我提取了HTML代码。当然它并不理想......但无论如何，我在这里。

屏幕分辨率变化时“非洲”堆栈下的下拉，以及“亚洲”下的下拉不会（我正在尝试编码以堆叠@不同的res）。前者是由Webflow的“下拉”小部件输入的，但我发现它们非常繁琐，并且只想手动硬编码。我已经尝试过一段时间试图模仿非洲下拉的代码（与@media位有关吗？）但由于某些原因，无论我怎么努力，我都无法让它们堆叠。有人可以提供解决方案吗？

.dropdown{
  position: relative;
  display: inline-block;
  font-family: Bitter, serif;
  font-size: 18px;
}

Answer 1

我调整了原始笔并创建了my own。我改变了什么：

• 我为下拉列表提供了一个dropdown-container类的容器，可以控制它们在屏幕尺寸变化时的组织方式。

• 我在display: flex课程中添加了dropdown-container CSS属性。我设置flex-flow: column告诉容器在一列中对这些元素进行排序。

• 当屏幕低于750px时，我将容器上的flex-flow属性更改为row，以便将下拉列表组织在一行中。

如果您对Flexbox了解不多，this is the cheat sheet I always fall back on。