使用display：flex属性创建响应（水平布局）导航栏

Question

对于移动网站，我必须在响应式导航栏中显示5个元素。对于小分辨率，我希望它们垂直堆积。但对于较大的那些，我的目标是列出这样的5个项目：

我尝试使用display:flex属性来完成这项工作。但不幸的是，我目前有：

我如何达到我想要的效果？为5个项目设置一个优雅的响应式导航栏（看起来也很平衡），这很棘手。因此，如果您想对我这样做的方式进行风格调整，我也会对此持开放态度。

我的代码很简单：

<div style="width:93%; max-width:400px;border: 1px solid #ccc;border-radius:4px;padding:5px 5px 5px 5px;background-color:#E8E8E8;box-shadow:0 1px 4px rgba(0, 0, 0, 0.1);">

<div style="display:flex;">
    <span style="font-size:12px;">Option 1</span> <span style="color:purple; font-size:12px;">({{ item_count }} items)</span>
    <span style="font-size:12px;">Option 2</span> <span style="color:purple; font-size:12px;">(({{ item_count }} items)</span>
</div>
<div style="display:flex;">
    <span style="font-size:12px;">Option 3</span> <span style="color:purple; font-size:12px;">(({{ item_count }} items)</span>
    <span style="font-size:12px;">Option 4</span> <span style="color:purple; font-size:12px;">(({{ item_count }} items)</span>
</div>

<span style="font-size:12px;">{{ other_options }} other options</span>
</div>

{{ }}语法是Django模板标记，可以忽略。请注意，显示的所有选项都是动态生成的，并且长度可变。

Answer 1

我会设置相对宽度和flex-wrap。对于桌面设备，您可以使用媒体查询调整宽度

HTML：

<div class="Wrapper">
  <div class="Item">Option 1</div>
  <div class="Item">Option 2</div>
  <div class="Item">Option 3</div>
  <div class="Item">Option 4</div>
</div>

CSS：

.Wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.Item {
  width: 50%;
}

Answer 2

所有项目必须位于同一父容器（flex容器）中。不要将它们分成几行。然后使用flex-wrap。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex-basis: 300px;
}

<div class="container">
    <span class="item">Option 1</span>
    <span class="item">Option 2</span>
    <span class="item">Option 3</span>
    <span class="item">Option 4</span>
    <span class="item">X other options</span>    
</div>

随意将flex-basis更改为其他值（您可以使用50％的百分比），或使用媒体查询将其设置为正确的值;

Answer 3

1. 创建一个元素来表示每个项目。不要使用彼此相关的两个<span>，除了彼此相邻之外。
2. 将每个项目放入一个容器中。不要手动强制您的行。
3. 允许使用flex-wrap: wrap;
进行换行
4. 在项目上设置尺寸，使其成为您想要的宽度
＆＃13;
＆＃13;
* {
  font-size: 12px
}

span+span {
  color: purple;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  flex: 0 0 50%;
  margin: 0;
  padding: 0;
}
＆＃13;
<ul>
  <li><span>Option 1</span> <span>({{ item_count }} items)</span></li>
  <li><span>Option 2</span> <span>(({{ item_count }} items)</span></li>
  <li><span>Option 3</span> <span>(({{ item_count }} items)</span></li>
  <li><span>Option 4</span> <span>(({{ item_count }} items)</span></li>
</ul>
<p>{{ other_options }} other options</p>
＆＃13;
＆＃13;
＆＃13;

  

对于小分辨率，我希望它们垂直堆积。

使用media queries将ul更改回display: block以禁用窄视口上的flexbox。