文档章节

弹性盒模型常见例子

凌兮洛
 凌兮洛
发布于 06/20 09:42
字数 540
阅读 6
收藏 0

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

© 著作权归作者所有

凌兮洛
粉丝 2
博文 24
码字总数 33511
作品 0
长沙
私信 提问
display属性值求解

display属性值求解 run-in:根据上下文决定对象是内联对象还是块级对象。(CSS3) box:将对象作为弹性伸缩盒显示。 (伸缩盒最老版本)(CSS3) inline-box:将对象作为内联块级弹性伸缩盒显...

gcbeen
2014/12/24
178
2
CSS中各种布局的背后(*FC)

CSS中各种布局的背后,实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box Model) 上图为W3C标准盒模型,另外还有一种IE盒模型(IE6以下),唯一的...

啊咩
2018/12/10
0
0
css设置当字数超过限制后以省略号(...)显示

文字超出一行,省略超出部分,显示'...' 用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 多行文本溢出显示省略号 注: ①-webkit-line-clamp用来限制在一个块元素...

Mr_C墨城
2017/11/03
0
0
纯css实现多行文本截断

概述 是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合...

gongzhen
2016/07/07
0
0
CSS:弹性盒模型(Flexible Box)学习

关于w3school对弹性盒模型的解释,只找到这些相关的属性: w3school原文中提到 浏览器支持 目前没有浏览器支持 box-flex 属性。 Firefox 支持替代的 -moz-box-flex 属性。 Safari、Opera 以及...

唐佳
2016/09/18
28
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux的基本命令

目录的操作命令(增删改查) 增: mkdir 目录名称; 查: ls 可以看到该目录下的所有的目录和文件 ls -a,可以看到该目录下的所有文件和目录,包括隐藏的 ls -l,可以看到该目录下的所有目录和...

凹凸凸
今天
2
0
在古老unix中增加新用户

Installing 4.3 BSD Quasijarus on SIMH 目标:要在4.3BSD中新增加用户dmr,指定目录/home/dmr,uid为10 gid=31(guest组,系统已建立) 4.3BSD还没有adduser或useradd 直接修改/etc/passwd...

wangxuwei
今天
2
0
Bootstrap(六)表单样式

基本样式 所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好...

ZeroBit
昨天
3
0
SSL 证书格式转换

SSL 证书格式转换 不同服务器情况下,需要不同的证书格式。 比如 pem 转 pfx。 pem在window 平台下可以导入,但是无法正常使用。 需要转换成pfx。 推荐在线转换工具,由中国数字证书网站提供...

DrChenXX
昨天
2
0
HAProxy

xx

Canaan_
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部