弹性盒模型常见例子

栏目: CSS · 发布时间: 7年前

内容简介：这篇文章主要是分享了三个例子( 垂直居中、响应式、圣杯 )，介绍了Flexbox的主要应用场景，并与传统方式对比，感受Flexbox布局带来的便捷开发体验。使用与否呈现的效果都是一样的什么是圣杯布局？比如下面的图片所示：上面是一个标题、中间是左边是目录，中间是内容，右测是一些推荐，底部是一个版权声明。

这篇文章主要是分享了三个例子( 垂直居中、响应式、圣杯 )，介绍了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;

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

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的负值来实现并列的结构。

不使用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;
}

以上所述就是小编给大家介绍的《弹性盒模型常见例子》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

算法设计与应用

迈克尔 T. 古德里奇（Michael T. Goodrich）、罗伯特·塔马契亚（Roberto Tamas / 乔海燕、李悫炜、王烁程 / 机械工业出版社 / 2017-11-20 / CNY 139.00

本书全面系统地介绍算法设计和算法应用的各个领域，内容涵盖经典数据结构、经典算法、算法分析方法、算法设计方法以及算法在各个领域的应用，还包含一些高级主题。本书采用应用驱动的方法引入各章内容，内容编排清晰合理，讲解由浅入深。此外，各章都附有巩固练习、创新练习和应用练习三种类型的题目，为读者理解和掌握算法设计和应用提供了很好的素材。本书可作为高等院校计算机及相关专业“数据结构和算法”课程的本科生......一起来看看《算法设计与应用》这本书的介绍吧!

码农工具

弹性盒模型常见例子

1 垂直居中对齐

不使用Flexbox

使用Flexbox

2 自适应导航

不使用Flexbox

使用Flexbox

3 圣杯布局

不使用Flexbox

使用Flexbox

算法设计与应用

图片转BASE64编码

XML、JSON 在线转换

HEX HSV 转换工具