Glittering's blog

Appearance

flex布局案例-骰子 ​

可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。

::: demo [vanilla]

html
<html>
  <div class="box2">
    <div class="first-face">
      <span class="pip"></span>
    </div>
    <div class="second-face">
      <span class="pip"></span>
      <span class="pip"></span>
    </div>
    <div class="third-face">
      <span class="pip"></span>
      <span class="pip"></span>
      <span class="pip"></span>
    </div>
    <div class="fourth-face">
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
    </div>
    <div class="fifth-face">
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
    </div>
    <div class="sixth-face">
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
    </div>
  </div>
</html>
<style>
  /* 一 */
  .first-face { /* 形成上下左右居中 */
    display: flex;
    /* 项目在主轴上居中 */
    justify-content: center;
    /* 项目在交叉轴上居中 */
    align-items: center;
  }
  /* 二 */
  .second-face {
    display: flex;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  .second-face .pip:nth-of-type(2) {
    /* 居下 */
    align-self: flex-end;
  }/* 三 */
  .third-face {
    display: flex;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  .third-face .pip:nth-of-type(2) {
    /* 居中 */
    align-self: center;
  }
  .third-face .pip:nth-of-type(3) {
    /* 居下 */
    align-self: flex-end;
  }
  /* 四 、六*/
  .fourth-face,
  .sixth-face {
    display: flex;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  .fourth-face .column,
  .sixth-face .column {
    display: flex;
    /* 纵向排列 */
    flex-direction: column;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  /* 五 */
  .fifth-face {
    display: flex;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  .fifth-face .column {
    display: flex;
    /* 纵向排列 */
    flex-direction: column;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  .fifth-face .column:nth-of-type(2) {
    /* 居中对齐 */
    justify-content: center;
  }
/* 基础样式 */
.box2 {
  display: flex;
  /* 项目在交叉轴上居中 */
  align-items: center;
  /* 项目在主轴上居中 */
  justify-content: center;
  vertical-align: center;
  /* 允许项目换行 */
  flex-wrap: wrap;  /* 项目是多行时以交叉轴中心对齐 */
  align-content: center;
  font-family: 'Open Sans', sans-serif;
}
/* 类名包含face的元素 */
[class$="face"] {
  margin: 5px;
  padding: 4px;  background-color: #e7e7e7;
  width: 104px;
  height: 104px;
  object-fit: contain;  box-shadow:
    inset 0 5px white,
    inset 0 -5px #bbb,
    inset 5px 0 #d7d7d7,
    inset -5px 0 #d7d7d7;  border-radius: 10%;
}
.pip {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 4px;  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
</style>

:::

参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

flex布局案例-圣杯布局 ​

可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。

::: demo [vanilla]

html
<html>
  <div class="HolyGrail">
    <header>#header</header>
    <div class="wrap">
      <nav class="left">left 宽度固定200px</nav>
      <main class="content">center 宽度自适应</main>
      <aside class="right">right 宽度固定200px</aside>
    </div>
    <footer>#footer</footer>
  </div>
</html>
<style>
  .HolyGrail {
    text-align: center;
    display: flex;
    min-height: 40vh;
    flex-direction: column;
  }
  .HolyGrail .wrap {
    display: flex;
    flex: 1;
  }
  .HolyGrail .content {
    background: #eee;
    flex: 1;
  }
  .HolyGrail .left,.HolyGrail .right {
    background:lightgreen;
    flex: 0 0 200px;
  }
  .HolyGrail header,.HolyGrail footer{
    background:#999;
    height: 50px;
    line-height: 50px;
  }
  .HolyGrail .left {
    background:salmon;
  }
</style>

:::

参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

flex布局案例-网格布局 ​

可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。

::: demo [vanilla]

html
<html>
  <div class="grid">
    <div class="grid-cell">1/2</div>
    <div class="grid-cell">1/2</div>
  </div>

  <div class="grid">
    <div class="grid-cell">1/3</div>
    <div class="grid-cell">1/3</div>
    <div class="grid-cell">1/3</div>
  </div>

  <div class="grid">
    <div class="grid-cell">1/4</div>
    <div class="grid-cell">1/4</div>
    <div class="grid-cell">1/4</div>
    <div class="grid-cell">1/4</div>
  </div>

  <div class="grid text">
    <div class="grid-cell">
      高度会跟随右侧元素变化
    </div>
    <div class="grid-cell">
      内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充
    </div>
  </div>

  <h4>某个网格设置百分比宽度</h4>
  <div class="grid">
      <div class="grid-cell u-full">100%</div>
  </div>
  <div class="grid">
      <div class="grid-cell u-1of2">50%</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
  </div>
  <div class="grid">
      <div class="grid-cell u-1of3">33.33%</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
  </div>
  <div class="grid">
      <div class="grid-cell u-1of4">25%</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
  </div>
</html>
<style>
  .grid {
    display: flex;
  }
  .grid-cell {
    flex: 1;
  }
  .grid-cell.u-full {
    flex: 0 0 100%;
  }
  .grid-cell.u-1of2 {
    flex: 0 0 50%;
  }
  .grid-cell.u-1of3 {
    flex: 0 0 33.3333%;
  }
  .grid-cell.u-1of4 {
    flex: 0 0 25%;
  }
  /* 基础样式 */
  .grid-cell {
    background: #eee;
    text-align: center;
    margin: 5px;
    padding: 10px 0;
  }
  .text .grid-cell {
    text-align: left
  }
</style>

:::

参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

flex布局案例-输入框布局 ​

可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。

::: demo [vanilla]

html
<html>
  <div class="InputAddOn">
    <span class="InputAddOn-item">icon</span>
    <input class="InputAddOn-field" placeholder="input宽度自适应">
    <button class="InputAddOn-item">提交</button>
  </div>
  <br/>
  <div class="Media">
    <div class="Media-figure">左侧固定</div>
    <p class="Media-body">右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应</p>
  </div>
</html>
<style>
  .InputAddOn {
    display: flex;
  }
  .InputAddOn-field {
    flex: 1;
  }
  .Media {
    display: flex;
    align-items: flex-start;
  }
  .Media-figure {
    width: 100px;
    height: 100px;
    background: #eee;
    margin-right: 1em;
  }
  .Media-body {
    flex: 1;
  }
  /* 基础样式 */
  input:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  }
  input {
    outline-color: invert;
    outline-style: none;
    outline-width: 0px;
    text-shadow: none;
    -webkit-appearance: none;
    -webkit-user-select: text;
    outline-color: transparent;
    box-shadow: none;
  }
  .InputAddOn-item {
    width: 100px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ccc;
    background: #eee
  }
  .InputAddOn-field {
    height: 30px;
    padding: 1px 6px;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
  }
</style>

:::

参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

Copyright © 2026