上下结构
思路
效果 (蓝色部分):
代码:
html:
<body>
<!-- 搜索框区域 -->
<div class="search-index">
<div class="search">
<span>搜索:目的地/酒店/景点/航班号</span>
</div>
<div class="login">
<span>我 的</span>
</div>
</div>
<!-- 搜索框结束 -->
</body>
css:
.search-index .login {
display: flex;
flex-direction: column; /* 把主轴设置成y轴 */
align-items: center; /* 侧轴上的元素居中对齐(注意只有一个元素) */
justify-content: center; /* 主轴上的元素居中对齐 (调整位置) */
width: 51px;
height: 44px;
padding-right: 4px;
background-color: skyblue;
}
.search-index .login::after {
content: "";
display: block;
width: 22px;
height: 22px;
background: url(../images/sprite.png) no-repeat 0 -36px;
background-size: 21px auto;
order: -1;
}
.search-index .login span {
font-size: 12px;
line-height: 12px;
color: #fff;
}
单行排列
可以将每个图标及其对应的文字作为一个li
, 那么一行就有五个li
. 然后为每个li
设置flex:1;
, 这样五个元素就能在同一行并且占有相等的份数了.
<!-- local-nav部分 -->
<ul class="local-nav">
<li>
<a href="#">
<i></i>
<span>攻略·景点</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>门票·玩乐</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>美食林</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>周边游</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>一日游</span>
</a>
</li>
</ul>
/* local-nav部分 */
.local-nav {
display: flex;
position: relative;
height: 64px;
padding: 4px 0 8px;
margin: -12px 12px 10px;
border-radius: 8px;
background-color: #fff;
}
.local-nav li {
flex: 1;
}
.local-nav li a {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 12px;
}
.local-nav li a i {
width: 40px;
height: 40px;
background: url(../images/localnav_bg.png) no-repeat 0 0;
background-size: 40px auto;
}
.local-nav li:nth-child(2) a i{
background: url(../images/localnav_bg.png) no-repeat 0 -40px;
background-size: 40px auto;
}
.local-nav li:nth-child(3) a i{
background: url(../images/localnav_bg.png) no-repeat 0 -80px;
background-size: 40px auto;
}
.local-nav li:nth-child(4) a i{
background: url(../images/localnav_bg.png) no-repeat 0 -120px;
background-size: 40px auto;
}
.local-nav li:nth-child(5) a i{
background: url(../images/localnav_bg.png) no-repeat 0 -160px;
background-size: 40px auto;
}
多行排列
多行元素就不适用 flex:1;
这种方式了. 需要给每个 li
设置宽度 (这里设置的是 width: 20%;
, 并且要用 flex-wrap: wrap;
换行.
<!-- subnav-entry部分 -->
<ul class="subnav-entry">
<li><a href="#"><i></i><span>自由行</span></a></li>
<li><a href="#"><i></i><span>自由行</span></a></li>
<li><a href="#"><i></i><span>自由行</span></a></li>
<li><a href="#"><i></i><span>自由行</span></a></li>
<li><a href="#"><i></i><span>自由行</span></a></li>
<li><a href="#"><i></i><span>自由行</span></a></li>
<li><a href="#"><i></i><span>自由行</span></a></li>
<li><a href="#"><i></i><span>自由行</span></a></li>
<li><a href="#"><i></i><span>自由行</span></a></li>
<li><a href="#"><i></i><span>自由行</span></a></li>
</ul>
/* subnav-entry部分 */
.subnav-entry {
display: flex;
margin: 0 12px 12px;
flex-wrap: wrap;
}
.subnav-entry li {
width: 20%;
}
.subnav-entry li a {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
font-size: 12px;
line-height: 12px;
}
.subnav-entry li a i {
width: 28px;
height: 28px;
margin: 10px 0 5px;
background: url(../images/subnav-bg.png) no-repeat 6px -137px;
background-size: 24px auto;
}