使菜单响应 - Flex

Question

我正在尝试使用Flexbox使这个菜单响应，我不能为我的生活看到我做错了什么。我希望菜单选项在移动视图中相互堆叠。我在使用Flex时没关系，但我无法在这里找出错误。任何帮助表示赞赏！

以下是代码的链接：code

CSS：

＆＃13;

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;