0
フレックスボックスを使用してこのメニューを反応させようとしています。私は、モバイルビューでメニューオプションをお互いに積み重ねたいと思っています。 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>
は、コードへのリンクです