【CSS3】flex布局实践篇 | 7种常见网页布局方案

本文介绍: 【CSS3】flex布局实践篇 | 7种常见网页布局方案

截屏2023-03-17 21.13.49.png

垂直居中一度是前端面试时必问知识点。目前的垂直解决方案使用了从负外边距到 display:table-cell 等荒谬的奇技淫巧，包括全高的伪元素。这些方法是又复杂又难写。

不知道大家第一次使用flex布局做什么，反正我是用来做垂直居中，使用它实在是太简单了，两行代码搞定。

<div class="main">
    <h2>我居中啦！</h2>
    <p>这个元素水平垂直居中了。</p>
</div>

业务场景：

<div class="container">
  <header>header</header>
  <main>
    <div class="content">
      今夜我不会遇见你 </br>
      今夜我遇见了世上的一切</br>
      但不会遇见你。
    </div>
  </main>
  <footer>footer</footer>
</div>



.container {
    display: flex;
    flex-derection: column;
}

header, footer{
    height: 100px;
}

截屏2023-03-17 21.52.13.png

main { flex-grow: 1; }

截屏2023-03-17 21.57.15.png

截屏2023-03-17 22.01.28.png

截屏2023-03-17 22.20.41.png

<div class="HolyGrail">
  <header>header</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">content</main>
    <nav class="HolyGrail-nav">nav</nav>
    <aside class="HolyGrail-ads">ads</aside>
  </div>
  <footer>footer</footer>
</div>


.HolyGrail {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header,footer {
  height: 100px;
}

.HolyGrail-body {
  flex: 1;

  display: flex;
  justify-content: space-between;
}

.HolyGrail-nav, .HolyGrail-ads {
  flex: 0 0 100px;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav {
  /* 导航放置最左边 */
  order: -1;
}

截屏2023-03-17 22.30.47.png

/* 响应式 */
@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
  }

  .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content {
    flex: 1;
  }
}

截屏2023-03-17 22.52.08.png

<header>
  <div class="header-left">
    <div class="logo"></div>
    <nav>
      <a>首页</a>
      <a>档案</a>
    </nav>
  </div>

  <div class="header-right">
    <div class="user">echo</div>
    <div class="logout">退出</div>
  </div>
</header>



header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left,.header-right {
  display: flex;
  align-items: center;
}

.logo {
  flex: 0 0 32px;
}

.user {
  margin-right: 20px;
}

截屏2023-03-17 23.11.39.png

<div class="grid">
  <div class="cell"></div>
  ...
</div>


.grid {
  display: flex;
}

.cell {
  flex: 1;
}

截屏2023-03-17 23.27.49.png

<div class="grid">
  <div class="cell u-1of2"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>


.u-1of2 {
  flex: 0 0 50%;
}

.u-1of3 {
  flex: 0 0 33.33%;
}

.u-1of4 {
  flex: 0 0 25%;
}

截屏2023-03-17 23.45.39.png

<div class="list">
  <div class="item">
    <div class="img"></div>
    <div class="info"></div>
  </div>
  <div class="item">
    <div class="img"></div>
    <div class="info"></div>
  </div>
</div>


.list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item {
  display: flex;
  gap: 10px;
}

.item:nth-of-type(2n) {
  flex-direction: row-reverse;
}

.img {
  width: 32px;
  height: 32px;
}

.info {
  flex: 1;
}

截屏2023-03-18 00.13.31.png

<!-- 后置 -->
<div class="InputAddOn next">
    <input class="InputAddOn-field" />
    <span class="InputAddOn-item">搜索</span>
</div>


.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

.InputAddOn-item {
  flex: 0 0 60px;
}