CSS3 box model (FLex elastic layout) instance code is fully exposed

preface

The box model (Flex Flex layout) in CSS3 is currently the most popular layout method. Compared to the traditional Position, FLoat, Table layout, the box model can use less code to achieve better results (such as various centers, alignment, etc.).

GitHub project address: github.com/jiangjiahen…

Projects show

1. Box containers

The picture sample

Code sample

<template>
  <div class="container">
    <div class="demo-box demo1"</h1> <h2> Flex-flow :column wrap-reverse; </h2> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </div>
    <div class="demo-box demo2"> < H1 >flex-direction Example: </h1> <h2>flex-direction:row-reverse</h2> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </div>
    <div class="demo-box demo3"> < H1 >flex-wrap Example: </h1> <h2>flex-wrap:wrap</h2> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </div>
    <div class="demo-box demo4"> <h1>align-content Example: </h1> <h2>align-content:space-around</h2> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
      </ul>
    </div>
    <div class="demo-box demo5"> < H1 >align-items Example: </h1> <h2>align-items:flex-start</h2> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </div>
    <div class="demo-box demo6"> <h1>justify-content Example: </h1> <h2>justify-content:space-between</h2> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss"scoped> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .demo-box { width: 440px; margin-bottom: 10px; padding-bottom: 20px; border: 1px solid black; } h1 {font: bold 20px/1.5 Georgia, Simsun, sans-serif; } .box { display: -webkit-flex; display: flex; width: 220px; margin: 0 auto; padding: 10px; list-style: none; background-color:#eee;
}
.box li {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  text-align: center;
}

.demo1 {
  .box {
    height: 220px;
    -webkit-flex-flow: column wrap-reverse;
    flex-flow: column wrap-reverse;
  }
}

.demo2 {
  .box {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}

.demo3 {
  .box {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.demo4 {
  .box {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 200px;
    height: 200px;
    border-radius: 5px;
    list-style: none;
    background-color: #eee;
    -webkit-align-content: space-around;
    align-content: space-around;
  }

  .box li {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    background: #aaa;
    text-align: center;
    width: 10px;
    height: 10px;
  }
}

.demo5 {
  .box {
    width: 200px;
    height: 100px;
    border-radius: 5px;
    list-style: none;
    background-color: #eee;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .box li {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    background: #aaa;
    text-align: center;
    width: 10px;
    height: 10px;
  }
}

.demo6 {
  .box {
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

  .box li {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    background: #aaa;
    text-align: center;
    width: 10px;
    height: 10px;
  }
}
</style>

Copy the code

2. Box project

The picture sample

Code sample

<template>
  <div class="container">
    <div class="demo-box demo1"Flex example: </h1> <ul class="box"> <li>flex:1 1 400px; </li> <li>flex:1 2 400px; </li> <li>flex:1 2 400px; </li> </ul> </div> <div class="demo-box demo2"> < H1 > Flex-grow Example: </h1> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
      </ul>
    </div>
    <div class="demo-box demo3"> < H1 > Flex-shrink Example: </h1> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </div>
    <div class="demo-box demo4"> < H1 > Flex-basis Example: </h1> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
      </ul>
    </div>
    <div class="demo-box demo5"> <h1>align-self Example: </h1> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
        <li>g</li>
        <li>h</li>
        <li>i</li>
      </ul>
    </div>
    <div class="demo-box demo6"> <h1> ORDER Example: </h1> <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss"scoped> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .demo-box { width: 440px; margin-bottom: 10px; padding-bottom: 20px; border: 1px solid black; } h1 {font: bold 20px/1.5 Georgia, Simsun, sans-serif; } .box { display: -webkit-flex; display: flex; width: 400px; height: 100px; margin: 10px auto; padding: 0; border-radius: 5px; list-style: none; background-color:#eee;
  li {
    background: #aaa;
    text-align: center;
  }
}
.box li:nth-child(1) {
  background: # 999;
}
.box li:nth-child(2) {
  background: #aaa;
}
.box li:nth-child(3) {
  background: #ccc;
}

.demo1 {
  .box {
    li:nth-child(1) {
      -webkit-flex: 1 1 400px;
      flex: 1 1 400px;
    }
    li:nth-child(2) {
      -webkit-flex: 1 2 400px;
      flex: 1 2 400px;
    }
    li:nth-child(3) {
      -webkit-flex: 1 2 400px;
      flex: 1 2 400px;
    }
  }
}

.demo2 {
  .box {
    li:nth-child(2) {
      -webkit-flex-grow: 1;
      flex-grow: 1;
    }
    li:nth-child(3) {
      -webkit-flex-grow: 2;
      flex-grow: 2;
    }
  }
}

.demo3 {
  .box {
    li {
      width: 200px;
    }
    li:nth-child(1) {
      background: # 888;
    }
    li:nth-child(2) {
      background: #ccc;
    }
    li:nth-child(3) {
      -webkit-flex-shrink: 3;
      flex-shrink: 3;
      background: #aaa;
    }
  }
}

.demo4 {
  .box {
    li {
      width: 100px;
      height: 100px;
      border: 1px solid #aaa;
      text-align: center;
    }
    li:nth-child(3) {
      -webkit-flex-basis: 600px;
      flex-basis: 600px;
    }
  }
}

.demo5 {
  .box {
    display: -webkit-flex;
    display: flex;
    height: 100px;
    margin: 0;
    padding: 10px;
    border-radius: 5px;
    list-style: none;
    background-color: #eee;
  }
  .box li {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    background: #aaa;
    text-align: center;
  }
  .box li:nth-child(1) {
    -webkit-align-self: flex-end;
    align-self: flex-end;
  }
  .box li:nth-child(2) {
    -webkit-align-self: center;
    align-self: center;
  }
  .box li:nth-child(3) {
    -webkit-align-self: flex-start;
    align-self: flex-start;
  }
  .box li:nth-child(4) {
    -webkit-align-self: baseline;
    align-self: baseline;
    padding: 20px 10px;
  }
  .box li:nth-child(5) {
    -webkit-align-self: baseline;
    align-self: baseline;
  }
  .box li:nth-child(6) {
    -webkit-align-self: stretch;
    align-self: stretch;
  }
  .box li:nth-child(7) {
    -webkit-align-self: auto;
    align-self: auto;
  }
}

.demo6 {
  .box {
    li {
      width: 100px;
      height: 100px;
      border: 1px solid #aaa;
      text-align: center;
    }
    li:nth-child(3) {
      -webkit-order: -1;
      order: -1;
    }
  }
}
</style>

Copy the code

3. Dice layout

The picture sample

Code sample

<template> <div> <h1> Dice layout </h1> <div class="container">
      <div class="demo1 dice">
        <span class="dice-point"></span>
      </div>
      <div class="demo2 dice">
        <span class="dice-point"></span>
        <span class="dice-point"></span>
      </div>
      <div class="demo3 dice">
        <span class="dice-point"></span>
        <span class="dice-point"></span>
        <span class="dice-point"></span>
      </div>
      <div class="demo4 dice">
        <div class="row">
          <span class="dice-point"></span>
          <span class="dice-point"></span>
        </div>
        <div class="row">
          <span class="dice-point"></span>
          <span class="dice-point"></span>
        </div>
      </div>
      <div class="demo5 dice">
        <div class="row">
          <span class="dice-point"></span>
          <span class="dice-point"></span>
        </div>
        <div class="row">
          <span class="dice-point"></span>
        </div>
        <div class="row">
          <span class="dice-point"></span>
          <span class="dice-point"></span>
        </div>
      </div>
      <div class="demo6 dice">
        <span class="dice-point"></span>
        <span class="dice-point"></span>
        <span class="dice-point"></span>
        <span class="dice-point"></span>
        <span class="dice-point"></span>
        <span class="dice-point"></span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
h1 {
  font-weight: bolder;
  text-align: center;
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 100px;
}

.dice{
    width: 100px;
    height:100px;
    border-radius: 10px;
    background-color: # 000;
    display: flex;
}

.dice-point{
    width: 22px;
    height: 22px;
    border-radius: 22px;
    margin:5px;
    background-color: #fff;
}

.demo1{
    justify-content: center;
    align-items: center;
}

.demo2{
    justify-content: space-between;
    align-items: center;
}

.demo3{
    .dice-point:nth-child(2){
        align-self: center;
    }
    .dice-point:nth-child(3){
        align-self: flex-end;
    }
}

.demo4, .demo5{
    flex-wrap: wrap;
}

.demo4 .row, .demo5 .row{
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
}

.demo4 .row:nth-child(2){
  align-items: flex-end;
}

.demo5 .row:nth-child(2){
  justify-content: center;
}

.demo6{
    flex-flow: column wrap;
    justify-content: space-between;
    align-content: space-between;
}
</style>

Copy the code

4. Grid layout

The picture sample

Code sample

<template> <div class> <h1> Layout of the grid </h1> <div class="container">
      <div class="Grid">
        <div class="Grid-cell u-full">full</div>
      </div>
      <div class="Grid">
        <div class="Grid-cell u-1of2">1of2</div>
        <div class="Grid-cell u-1of2">1of2</div>
      </div>
      <div class="Grid">
        <div class="Grid-cell u-1of3">1of3</div>
        <div class="Grid-cell u-1of3">1of3</div>
        <div class="Grid-cell u-1of3">1of3</div>
      </div>
      <div class="Grid">
        <div class="Grid-cell u-1of4">1of4</div>
        <div class="Grid-cell u-1of4">1of4</div>
        <div class="Grid-cell u-1of4">1of4</div>
        <div class="Grid-cell u-1of4">1of4</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  border: 4px solid lightgrey;
  border-radius: 10px;
  width: 80%;
  margin: 2% auto;
  position: relative;
}

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
  background-color: lightgrey;
  height: 50px;
  line-height: 50px;
  margin: 10px;
  font-size: 18px;
  font-weight: bolder;
  color:#fff;}.grid-cell. U-full {flex: 0 0 98.3333; }.grid-cell. U-1of2 {flex: 0 0 48.3333; }.grid-cell. U-1of3 {flex: 0 0 31.6666%; }.grid-cell. U-1of4 {flex: 0 0 23.3333; } </style>Copy the code

5. Layout of the Grail

The picture sample

Code sample

<template> <div class> <h1> Grail layout </h1> <div class="container">
      <div class="HolyGrail">
        <div class="Header">#header</div>
        <div class="HolyGrail-body">
          <div class="HolyGrail-content">#center</div>
          <div class="HolyGrail-nav">#left</div>
          <div class="HolyGrail-ads">#right</div>
        </div>
        <div class="Footer">#footer</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  border: 4px solid lightgrey;
  border-radius: 10px;
  width: 80%;
  margin: 2% auto;
  position: relative;
}

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

.Header,
.Footer {
  flex: 1;
  height: 100px;
  background-color: grey;
  color: #fff;
  line-height: 100px;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  background-color: lightgrey;
  height: 600px;
  line-height: 600px;
  color: #fff;
  flex: 1;
}

.HolyGrail-nav,
.HolyGrail-ads {
  background-color: skyblue;
  height: 600px;
  line-height: 600px;
  color: #fff;
  flex: 0 0 12em;
}

.HolyGrail-nav {
  background-color: orange;
  order: -1;
}

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}
</style>

Copy the code

6. Layout of input boxes

The picture sample

Code sample

<template> <div class> <h1> Layout of the input box </h1> <div class="container">
      <div class="InputAddOn">
        <span class="InputAddOn-item">
          <i class="el-icon-search"></i>
        </span>
        <input class="InputAddOn-field" />
        <button class="InputAddOn-item">Go</button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  border-radius: 10px;
  width: 80%;
  margin: 0 auto;
  position: relative;
  height: 200px;
  display: flex;
  justify-content: center;
}

.InputAddOn {
  width: 400px;
  height: 30px;
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

.InputAddOn-item:first-child {
  background-color: lightgrey;
}

.InputAddOn-item {
  width: 30px;
  line-height: 30px;
  text-align: center;
  // border: 1px solid grey;
}
</style>

Copy the code

7. Hanging layout

The picture sample

Code sample

<template> <div class> <h1> Hanging layout </h1> <div class="Media">
        <img class="Media-figure" src=".. /.. /assets/logo.png" alt="logo" />
        <p class="Media-body"Vue (pronounced /vju /, similar to View) is a set of incremental frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications. If you want to learn more about Vue before you dive into it, we've created a video that walks you through its core concepts and an example project. If you are already an experienced front-end developer and want to know how Vue differs from other libraries/frameworks, check out the comparison. </p> </div> </div> </template> <style lang="scss" scoped>

.Media {
  display: flex;
  align-items: flex-start;
  width: 50%;
  margin: 1% auto;
  background-color:#f0f0f0;
  padding: 1%;
}

.Media-figure {
  margin-right: 1em;
  width: 100px;
}

.Media-body {
  flex: 1;
  text-align: left;
  span{
    display: block;
    font-weight: bolder;
  }
}
</style>

Copy the code

8. Fixed bottom column

The picture sample

Code sample

<template> <div class> <h1> Fixed bottom column </h1> <div class="container">
      <div class="Site">
        <header>#header</header>
        <main class="Site-content">#content</main>
        <footer>#footer</footer>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  border: 4px solid lightgrey;
  border-radius: 10px;
  width: 80%;
  margin: 2% auto;
  position: relative;
}

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

.Site-content {
  flex: 1;
  height: 400px;
  line-height: 400px;
}

header,
footer {
  height: 100px;
  background-color: grey;
  color: #fff;
  line-height: 100px;
}
</style>

Copy the code

9. Streaming layout

The picture sample

Code sample

<template> <div class> <h1> Streaming layout </h1> <div class="container">
      <div class="parent">
        <div class="child" v-for="(i,index) in 10" :key="index">{{i}}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  border: 4px solid lightgrey;
  border-radius: 10px;
  width: 40%;
  margin: 2% auto;
  position: relative;
}

.parent {
  width: 200px;
  height: 150px;
  margin: 10% auto;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  height: 50px;
  line-height: 50px;
  flex: 0 0 25%;
  background-color: white;
  border: 1px solid red;
}
</style>

Copy the code

CSS3 box model (FLex elastic layout) instance code is fully exposed

preface

Projects show

1. Box containers

2. Box project

3. Dice layout

4. Grid layout

5. Layout of the Grail

6. Layout of input boxes

7. Hanging layout

8. Fixed bottom column

9. Streaming layout

Related Posts

Interview essentials! HTML often meet test summary

Deep copy and shallow copy

How to implement a VUE front-end error monitoring