上下结构

思路

在这里插入图片描述

效果 (蓝色部分):

在这里插入图片描述

代码:

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

移动端flex图标和文字上下结构布局思路

上下结构

思路

效果 (蓝色部分):

代码:

单行排列

多行排列