Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- <link href="normalize.css" rel="stylesheet" /> -->
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .container {
        max-width: 1024px;
        margin: 0 auto;
      }
      .gutter {
        margin: 1rem;
        padding: 0;
      }
      .flex__item {
        border: 2px solid darkgreen;
      }
      input {
        border: 1px solid #ccc;
        background: transparent;
      }
      label {
        background: #ddd;
        width: 20%;
      }
      .demo1 {
        margin-top: 0;
      }
      .demo1 > .flex__item {
        flex-basis: 200px;
        margin-top: 1rem;
      }
      .demo1--list > .flex__item {
        flex-basis: 200px;
        margin-top: 1rem;
      }
      .demo1 > .flex__item img {
        width: 100%;
        height: 200px;
      }
      .list2 > .flex__item:nth-of-type(2n + 1) {
        margin-right: calc((100% - 200px * 2) / 1);
      }
      .list3 > .flex__item:not(:nth-of-type(3n)) {
        margin-right: calc((100% - 200px * 3) / 2);
      }
      .list4 > .flex__item:not(:nth-of-type(4n)) {
        margin-right: calc((100% - 200px * 4) / 3);
      }
      /*IE edge */
      _:-ms-lang(x),
      .list4 > .flex__item:not(:nth-of-type(4n)) {
        margin-right: calc((100% - 200px * 4 - 0.5px) / 3);
      }
      .list5 > .flex__item:not(:nth-of-type(5n)) {
        margin-right: calc((100% - 200px * 5) / 4);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div
        class="gutter flex flex--mc"
        style="height: 200px; border: 1px solid darkred"
      >
        <div
          ><p>Middle Center</p
          ><p>Middle Center Middle Center Middle Center Middle Center</p></div
        >
      </div>
      <ul class="gutter flex flex--between demo1">
        <li class="flex__item">
          <img src="http://via.placeholder.com/200" />
          <p>这是一张图片</p>
        </li>
        <li class="flex__item">
          <img src="http://via.placeholder.com/200" />
          <p
            >这是一张很长的图片这是一张很长的图片这是一张很长的图片这是一张很长的图片</p
          >
        </li>
        <li class="flex__item">
          <img src="http://via.placeholder.com/150" />
          <div class="flex flex--middle">
            <p class="flex__item flex__item--auto">这是一张图片</p>
            <a class="flex__item" href="">详情</a>
          </div>
        </li>
        <li class="flex__item">
          <img src="http://via.placeholder.com/200" />
          <p>这是一张图片</p>
        </li>
        <li class="flex__item">
          <img src="http://via.placeholder.com/200" />
          <p>这是一张图片</p>
        </li>
       <!--  <li class="flex__item">
          <img src="http://via.placeholder.com/200" />
          <div class="flex flex--middle">
            <p class="flex__item flex__item--auto">这是一张图片</p>
            <a class="flex__item" href="">详情</a>
          </div>
        </li> -->
        <!-- placeholder max column * placeholder-->
        <li class="flex__item placeholder"></li>
        <li class="flex__item placeholder"></li>
        <li class="flex__item placeholder"></li>
        <li class="flex__item placeholder"></li>
      </ul>
      <div class="gutter flex">
        <div class="flex__item">
          <img src="http://via.placeholder.com/48" />
        </div>
        <div class="flex__item flex__item--auto">
          <h1>useful defaults</h1>
          <p>
            Preserves useful defaults, unlike many CSS resets. Preserves useful
            defaults, unlike many CSS resets. Preserves useful defaults, unlike
            many CSS resets.
          </p>
        </div>
      </div>
      <ul class="gutter flex flex--between">
        <li class="flex__item"><a href="">Menu</a></li>
        <li class="flex__item"><a href="">Menu</a></li>
        <li class="flex__item"><a href="">Menu</a></li>
        <li class="flex__item"><a href="">Menu</a></li>
        <li class="flex__item"><a href="">Menu</a></li>
        <li class="flex__item"><a href="">Menu</a></li>
      </ul>
      <ul class="gutter">
        <li class="flex flex--middle">
          <div class="flex__item">
            <img src="http://via.placeholder.com/16" />
          </div>
          <div class="flex__item flex__item--auto">
            <h1>useful defaults</h1>
            <p>
              Preserves useful defaults, unlike many CSS resets. Preserves
              useful defaults, unlike many CSS resets. Preserves useful
              defaults, unlike many CSS resets.
            </p>
          </div>
        </li>
        <li class="flex flex--middle">
          <div class="flex__item">
            <img src="http://via.placeholder.com/16" />
          </div>
          <div class="flex__item flex__item--auto">
            <h1>useful defaults</h1>
            <p>
              Preserves useful defaults, unlike many CSS resets. Preserves
              useful defaults, unlike many CSS resets. Preserves useful
              defaults, unlike many CSS resets.
            </p>
          </div>
        </li>
      </ul>
      <div class="gutter">
        <div class="flex flex--middle">
          <div class="flex__item flex__item--auto">
            Preserves useful defaults, unlike many CSS resets. Preserves useful
            defaults, unlike many CSS resets. Preserves useful defaults, unlike
            many CSS resets.
          </div>
          <div class="flex__item"
            >Preserves useful defaults, unlike many CSS resets.</div
          >
        </div>
        <div class="flex flex--middle">
          <div class="flex__item flex__item--auto">
            Preserves useful defaults, unlike many CSS resets. Preserves useful
            defaults, unlike many CSS resets. Preserves useful defaults, unlike
            many CSS resets.
          </div>
          <div class="flex__item">More</div>
        </div>
      </div>
      <div class="gutter flex">
        <div class="flex__item" style="flex-basis: 25%;">
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
          <div>xxx</div>
        </div>
        <div class="flex__item flex__item--auto">Preserves useful defaults</div>
        <div class="flex__item" style="flex-basis: 20%;"> yyy </div>
      </div>
      <div class="gutter flex" style="height: 4rem;">
        <label class="flex__item flex flex--mc">
          姓名
        </label>
        <input type="text" class="flex__item flex__item--auto" />
      </div>
      <div class="gutter flex" style="height: 4rem;">
        <input type="text" class="flex__item flex__item--auto" />
        <label class="flex__item flex flex--mc">
          元
        </label>
      </div>
      <ul class="gutter flex demo1 demo1--list list3">
        <li class="flex__item">
          <img src="http://via.placeholder.com/200" />
          <p>这是一张图片</p>
        </li>
        <li class="flex__item">
          <img src="http://via.placeholder.com/200" />
          <p
            >这是一张很长的图片这是一张很长的图片这是一张很长的图片这是一张很长的图片</p
          >
        </li>
        <li class="flex__item">
          <img src="http://via.placeholder.com/150" />
          <div class="flex flex--middle">
            <p class="flex__item flex__item--auto">这是一张图片</p>
            <a class="flex__item" href="">详情</a>
          </div>
        </li>
        <li class="flex__item">
          <img src="http://via.placeholder.com/200" />
          <p>这是一张图片</p>
        </li>
        <li class="flex__item">
          <img src="http://via.placeholder.com/200" />
          <p>这是一张图片</p>
        </li>
 <!--        <li class="flex__item">
          <img src="http://via.placeholder.com/200" />
          <div class="flex flex--middle">
            <p class="flex__item flex__item--auto">这是一张图片</p>
            <a class="flex__item" href="">详情</a>
          </div>
        </li> -->
      </ul>
    </div>
  </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers