弹性盒模型常见例子

2019-06-20 本文已影响6人前白

这篇文章主要是分享了三个例子( 垂直居中、响应式、圣杯 )，介绍了Flexbox的主要应用场景，并与传统方式对比，感受Flexbox布局带来的便捷开发体验。

1 垂直居中对齐

不使用Flexbox

    <style>
            .main1 {
                position: relative;
                height: 200px;
                background: #8A469B;
            }
            .main1 div {
                display: block;
                width: 50%;
                height: 50%;
                background: #EA7F26;
                overflow: hidden;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }
            .main1 div span {
                position: absolute;
                margin: 0;
                padding: 0;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background: #EA7F26;
            }
            .main2 {
                height: 200px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #8A469B;
            }
            .main2 div {
                width: 50%;
                height: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #EA7F26;
            }
    </style>
    <body>
        <h3>不使用Flexbox</h3>
        <div class="main1">
            <div>
                <span>
                    侠课岛
                </span>
            </div>
        </div>
        <h3>使用Flexbox</h3>
        <div class="main2">
            <div>
                <span>
                    侠课岛
                </span>
            </div>
        </div>
    </body>

使用Flexbox

    display: flex;
    justify-content: center;
    align-items: center;

使用与否呈现的效果都是一样的

20.png

2 自适应导航

不使用Flexbox

  .main {
      text-align: right;
    }
  .main li {
      display: inline-block;
    }
  
  /* 小于800px 大于600px */
  @media screen and (max-width: 800px) {
      .main {
        text-align: justify;
            text-align-last: justify;
      }
  }
  /* 小于600px */
  @media screen and (max-width: 600px) {
      .main li {
          display: block;
        }
        .main a {
          display: block;
          text-align: center;
          text-align-last: center;
        }
  }

使用Flexbox

 .main {
     display: flex;
     flex-flow: row wrap;
     justify-content: flex-end;
 }
 
 /* 小于800px 大于600px */
 @media screen and (max-width: 800px) {
     .main {
       justify-content: space-between;
     }
 }
 
 /* 小于600px */
 @media screen and (max-width: 600px) {
     .main {
       flex-flow: column nowrap;
     }
 }

3 圣杯布局

什么是圣杯布局？比如下面的图片所示：上面是一个标题、中间是左边是目录，中间是内容，右测是一些推荐，底部是一个版权声明。
圣杯布局和双飞翼布局的共同特点都是利用float+margin的负值来实现并列的结构。

201.png

不使用Flexbox

 .left,.middle,.right {
   position: relative;
     float: left;
     height: 100%;
  }
  .container {
     padding:0 200px 0 200px;
     height: calc(100% - 120px);
  }
  .left {
     margin-left: -100%;
     left: -200px;
     width: 200px;
     background-color: #ffff99;
  }
  .right {
     margin-left: -200px;
     right: -200px;
     width: 200px;
     background-color: #ffff99;
  }
  .middle { 
     width: 100%;
     background-color: #EE8888;
     word-break: break-all;
  }
  .header {
     height: 80px;
     background-color: #cdcdcd;
  }
  .footer { 
     height: 40px;
     background-color: #cdcdcd;
     clear: both;
  }

使用Flexbox

 .flex {
     display: flex;
   flex-wrap: nowrap;
 }
 .leftBar {
     width: 200px;
     flex-shrink: 0;
 }
 .container {
     width: 100%;
 }
 .rightBar {
     width: 200px;
     flex-shrink: 0;
 }

弹性盒模型常见例子

1 垂直居中对齐

2 自适应导航

3 圣杯布局

猜你喜欢

热点阅读