夜间模式CodeSnippetStyle:
日间模式CodeSnippetStyle:

0%


flex布局应用,一种讨巧的header布局方法

在开发移动端页面的时候,我们时常需要一个页面的header。 例如提供返回,设置菜单,或者标题显示。
这里提供一种利用flex属性进行响应布局的方法:

情况一,三栏布局。
如下图:

想法是这样的:

示例demo:

//vue + vant demo
<template>
  <div class="my">
    <div class="header">
      <div class="one">
        <div class="goBack">
          <van-button type="default" to="/MainApp/">
            <van-icon name="arrow-left" size="32" />
          </van-button>
        </div>
      </div>
      <div class="two">
        <div class="info">我的信息</div>
      </div>
      <div class="three">
        <div class="setting">
          <van-button type="default" to="/MainApp/">
            <van-icon name="ellipsis" size="32" />
          </van-button>
        </div>
      </div>
    </div>

    <van-cell-group>
      <van-cell title="单元格" value="内容" size="large" />
      <van-cell title="单元格" value="内容" size="large" />
      <van-cell title="单元格" value="内容" size="large" />
      <van-cell title="单元格" value="内容" size="large" />
      <van-cell title="单元格" value="内容" size="large" />
      <van-cell title="路由跳转" is-link size="large" to="/MainApp/My/ConnectTheManager" />
    </van-cell-group>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
@import "~@/assets/css/components/MainApp/My.css";
</style>
//css
.My {
    height: 100vh;
    background-color: aquamarine;
  }
  .header {
    justify-content: space-between;
    display: flex;
    height: 3em;
  }
  .header .one {
    display: flex;
    justify-content: flex-start;
    align-content: center;
  }
  .header .two {
    display: flex;
    justify-content: center;
    align-content: center;
  }
  .header .three {
    display: flex;
    justify-content: flex-end;
    align-content: center;
  }
  .header .one,
  .two,
  .three {
    width: 100px;//也可以写auto
  }
  
  
  .header .one *{
    border: none;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header .info {
    font-size: larger;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header .three *{
    border: none;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
  }

情况二,两栏布局
如下图:

主要的思路想法是一样的。 只是不同的是,这时候只有两个实际存在的元素,这个时候。 我们需要给三个容器都指定一定的合适宽度,才能实现我们想要的效果。 代码示例如下。
//vue + vant demo
<template>
  <div class="ConnectTheManager">
    <div class="header">
      <!-- <router-link to="/MainApp/"> -->
      <div class="one">
        <div class="goBack">
          <van-button type="default" to="/MainApp/">
            <van-icon name="arrow-left" size="32" />
          </van-button>
        </div>
      </div>
      <!-- </router-link> -->
      <div class="two">
        <div class="info">联系管理员</div>
      </div>
      <div class="three">
        <div class="setting"></div>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="单元格" value="内容" size="large" />
    </van-cell-group>

    <h2>电话12341234</h2>
  </div>
</template>
//css
.ConnectTheManager {
  height: 100vh;
}
.header {
  justify-content: space-between;
  display: flex;
  height: 3em;
}
.header .one {
  display: flex;
  justify-content: flex-start;
  align-content: center;
}
.header .two {
  display: flex;
  justify-content: center;
  align-content: center;
}
.header .three {
  display: flex;
  justify-content: flex-end;
  align-content: center;
}
.header .one,
.two,
.three {
  width: 100px;//特别注意这里。 如果不指定宽度,就无法水平三栏等距分布。
}

.header .one * {
  border: none;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .info {
  font-size: larger;
  display: flex;
  justify-content: center;
  align-items: center;
}

同样的思路,四栏,五栏甚至更多,都能用这种方法实现,自适应的水平,垂直居中。

posted @ 2020-04-12 18:31  暮冬有八  阅读(559)  评论(0编辑  收藏  举报
BACK TO TOP

😀迷海无灯听船行。Github WeChat