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

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

情况一，三栏布局。
如下图：

想法是这样的：

示例demo：

//vue + vant demo




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


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

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

项目开发的时候遇到的一些问题

相关

标签