美文网首页
CSS3使用 Flex 和 Grid 分别实现布局

CSS3使用 Flex 和 Grid 分别实现布局

作者: Piszz | 来源:发表于2019-10-15 11:12 被阅读0次

    有小伙伴问如何实现如下效果图,于是用Flex 和 Grid 分别实现了代码,当然table和float 都可以实现,本文只是用flex和grid实现效果。

    外部链接

    关于Flex和Grid兼容性,可以前往 Caniuse 进行查询。
    Demo源码地址
    Demo演示地址

    效果图


    image.png
    • 废话不说,直接上代码。

    部分公用CSS代码

          /* 通用样式 */
          * {
            margin: 0;
            padding: 0;
          }
          li {
            list-style: none;
          }
          .center {
            background-color: #99c3ff;
          }
          .title {
            height: 50px;
            background-color: #e7bdf3;
          }
          .list li:nth-child(1) {
            background-color: #fb7293;
          }
          .list li:nth-child(2) {
            background-color: #ff9f7e;
          }
          .list li:nth-child(3) {
            background-color: #ffdb5c;
          }
          .list li:nth-child(4) {
            background-color: #9fe7b9;
          }
          .list li:nth-child(5) {
            background-color: #32c5e9;
          }
          .list li:nth-child(6) {
            background-color: #36a3db;
          } 
    

    Flex 实现

    • CSS 代码
          /* Flex 布局 */
          .flex-box {
            width: 300px;
            color: #fff;
            text-align: center;
          }
          .flex-box .title {
            height: 50px;
          }
          .flex-box .content {
            padding-top: 8px;
            display: flex;
          }
          .flex-box .center {
            flex-basis: 50px;
            margin: 0 5px 8px;
          }
          .flex-box .list {
            flex: 1;
          }
          .flex-box .list li {
            height: 50px;
            margin-bottom: 8px;
          }
    
    • HTML代码
         <!-- S Flex 布局 -->
        <div class="flex-box">
          <div class="title">救护车展区</div>
          <div class="content">
            <ul class="list">
              <li>S1</li>
              <li>S2</li>
              <li>S3</li>
              <li>S4</li>
              <li>S5</li>
              <li>S6</li>
            </ul>
            <div class="center">连廊</div>
            <ul class="list">
              <li>N1</li>
              <li>N2</li>
              <li>N3</li>
              <li>N4</li>
              <li>N5</li>
              <li>N6</li>
            </ul>
          </div>
        </div>
        <!-- E Flex 布局 -->
    

    Grid 实现

          /* Grid 布局 */
          .grid-box {
            display: grid;
            grid-template-columns: 300px;
            text-align: center;
            color: #fff;
            grid-row-gap: 8px;
          }
          .grid-box .content {
            display: grid;
            grid-template-columns: 120px 50px 120px;
            grid-column-gap: 5px;
          }
          .grid-box .list {
            display: grid;
            grid-auto-rows: 50px;
            grid-row-gap: 8px;
          }
    
        <!-- S Grid 布局 -->
        <div class="grid-box">
          <div class="title">救护车展区</div>
          <div class="content">
            <ul class="list">
              <li>S1</li>
              <li>S2</li>
              <li>S3</li>
              <li>S4</li>
              <li>S5</li>
              <li>S6</li>
            </ul>
            <div class="center">连廊</div>
            <ul class="list">
              <li>N1</li>
              <li>N2</li>
              <li>N3</li>
              <li>N4</li>
              <li>N5</li>
              <li>N6</li>
            </ul>
          </div>
        </div>
        <!-- E Grid 布局 -->
    

    相关文章

      网友评论

          本文标题:CSS3使用 Flex 和 Grid 分别实现布局

          本文链接:https://www.haomeiwen.com/subject/sbijmctx.html