html - 使菜单响应 - Flex

Question

我正在尝试使用 Flexbox 使此菜单具有响应性，但我终究无法看到自己做错了什么。我希望菜单选项在移动 View 中相互堆叠。我在使用 Flex 时没问题，但我就是找不到这里的错误。感谢您的帮助!

这是代码的链接:code

CSS:

.tabs-menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  padding: 5px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, .3);
}

.w-tab-menu {
  position: relative;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div {
  display: block;
}

.tabs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.tab-link.w--current {
  border-radius: 3px;
  background-color: #00713e;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-weight: 600;
}

.w-tab-link.w--current {
  background-color: rgba(40, 136, 55, .73);
}

.tab-link {
  background-color: #fff;
  font-family: 'Open Sans', sans-serif;
  color: #5d5d5d;
  font-weight: 600;
}

.w-tab-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  padding: 9px 30px;
  text-align: left;
  cursor: pointer;
  color: #5d5d5d;
  background-color: #fff;
  font-family: 'Open Sans', sans-serif;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

a {
  color: #288837;
  text-decoration: none;
}

a {
  background-color: transparent;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

HTML:

<div class="tabs-menu w-tab-menu">
  <a data-w-tab="Tab 1" class="tab-link w-inline-block w-tab-link w--current">
    <div>Baby and Children</div>
  </a>
  <a data-w-tab="Tab 2" class="tab-link w-inline-block w-tab-link">
    <div>Camo Gear</div>
  </a>
  <a data-w-tab="Tab 3" class="tab-link w-inline-block w-tab-link">
    <div>Boots</div>
  </a>
  <a data-w-tab="Tab 4" class="tab-link w-inline-block w-tab-link">
    <div>Gifts</div>
  </a>
  <a data-w-tab="Tab 5" class="tab-link w-inline-block w-tab-link">
    <div>Home Decor</div>
  </a>
  <a data-w-tab="Tab 6" class="tab-link w-inline-block w-tab-link">
    <div>Sports Goods</div>
  </a>
  <a data-w-tab="Tab 7" class="tab-link w-inline-block w-tab-link">
    <div>Work Wear</div>
  </a>
</div>

Answer 1

对您喜欢的屏幕尺寸使用媒体查询并定位 .tabs-menu 并执行 flex-direction: column 我添加了一个 flex-wrap :wrap 在单个规则上，以便它们在调整大小时折叠。希望对您有所帮助。

Fiddle

.tabs-menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    padding: 5px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, .3);
    flex-wrap: wrap /*Added*/
}

.w-tab-menu {
    position: relative;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div {
    display: block;
}

.tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.tab-link.w--current {
    border-radius: 3px;
    background-color: #00713e;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: 600;
}

.w-tab-link.w--current {
    background-color: rgba(40, 136, 55, .73);
}

.tab-link {
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    color: #5d5d5d;
    font-weight: 600;
}

.w-tab-link {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    padding: 9px 30px;
    text-align: left;
    cursor: pointer;
    color: #5d5d5d;
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
}

.w-inline-block {
    max-width: 100%;
    display: inline-block;
}

a {
    color: #288837;
    text-decoration: none;
}

a {
    background-color: transparent;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 420px){
  .tabs-menu{
    flex-direction: column;
  }
}

<div class="tabs-menu w-tab-menu"><a data-w-tab="Tab 1" class="tab-link w-inline-block w-tab-link w--current"><div>Baby and Children</div></a><a data-w-tab="Tab 2" class="tab-link w-inline-block w-tab-link"><div>Camo Gear</div></a><a data-w-tab="Tab 3" class="tab-link w-inline-block w-tab-link"><div>Boots</div></a><a data-w-tab="Tab 4" class="tab-link w-inline-block w-tab-link"><div>Gifts</div></a><a data-w-tab="Tab 5" class="tab-link w-inline-block w-tab-link"><div>Home Decor</div></a><a data-w-tab="Tab 6" class="tab-link w-inline-block w-tab-link"><div>Sports Goods</div></a><a data-w-tab="Tab 7" class="tab-link w-inline-block w-tab-link"><div>Work Wear</div></a></div>