首页 > 网页制作 > CSS

基础的CSS3弹性盒Flexbox布局使用实例

admin CSS 2022-02-06 16:25:18 CSS   Flexbox"

   flexbox是一个新的盒子模型,当你给一个元素使用了flexbox模块,那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方,下面就着重讲述一下它的一些使用场景:
 
Example 1: flexbox等分布局
 
      如果你要实现以下所示的样式,你可能首先想到的是用float:
201648121454883.png (298×71) 

CSS Code复制内容到剪贴板
  1.      "ranktop3">    
  2.     
  3.    
  4.     
  5.     
  6.      "ranktab">1
  
  •     
  •      

    fdeg

        
  •     
  •      

    霸气值:170

        
  •     
  •    
  •      
  •     
  •    
  •     
  •     
  •      "ranktab">2
  •     
  •     
  •      

    bling

        
  •     
  •      

    霸气值:160

        
  •     
  •    
  •     
  •     
  •    
  •     
  •     
  •      "ranktab">3
  •     
  •     
  •      

    lea

      
  •     
  •      

    霸气值:150

      
  •     
  •    
  •     
  •     
  •   
  •   
  • ul li {   
  •     
  •     width: 32.9%;   
  •     
  •     floatleft;   
  •     
  •     border-right1px solid #fa9900;   
  •     
  •     padding5px 0;   
  •     
  • }  
  •  
    但当只有2个排名后,少了一个li节点后,就会展示如下:
    201648121514023.png (300×68)

    删除两个li节点后如下:
    201648121536879.png (295×76)

    但是用户以及设计师肯定不希望看到这样的界面。他们肯定希望界面是这样的:
    减少一个li节点后:
    201648121619175.png (302×71)

    删除两个li节点后如下:
    201648121637365.png (299×69)

    那么这里用display:flex布局是最好不过的了,新的flexbox布局模式被用来重新定义CSS中的布局方式:

    CSS Code复制内容到剪贴板
    1. ul {   
    2.     
    3.     display:flex;//表示改直接子元素用flex布局,默认横向布局   
    4.     
    5. }   
    6.     
    7. ul li {   
    8.     
    9.      /*width: 32.9%;*/  
    10.     
    11.      /*float: left;*/  
    12.     
    13.      border-right1px solid #fa9900;   
    14.     
    15.      padding5px 0;   
    16.     
    17.      flex: 1;表示子元素之间平均分配   
    18.     
    19. }  

     
    可见用flex布局非常完美,这就是flex布局的牛逼之处。很遗憾的是最近规范变动过多,导致各个浏览器对它的实现也有所不同。为了兼容更多的浏览器,也可以这样写:

    display: flex;display: -webkit-box;这两个属性的方法作用相同。
     
    Example 2: flexbox不等分布局

    CSS Code复制内容到剪贴板
    1. "container">   
    2.     
    3.   "initial">   
    4.     
    5.     

        

    6.     
    7.         空间足够的时候,我的宽度是200px,如果空间不足,   
    8.     
    9.             我会变窄到100px,但不会再窄了。   
    10.     
    11.     

        
    12.     
    13.      
    14.     
    15.   "none">   
    16.     
    17.     

        

    18.     
    19.        无论窗口如何变化,我的宽度一直是200px。   
    20.     
    21.     

        
    22.     
    23.      
    24.     
    25.   "flex1">   
    26.     
    27.     

        

    28.     
    29.       我会占满剩余宽度的1/3。   
    30.     
    31.     

        
    32.     
    33.      
    34.     
    35.   "flex2">   
    36.     
    37.     

        

    38.     
    39.       我会占满剩余宽度的2/3。   
    40.     
    41.     

        
    42.     
    43.      
    44.     
      
  •   
  • .container {   
  •     
  •   display: -webkit-flex;   
  •     
  •   display: flex;   
  •     
  • }   
  •     
  • .initial {     
  •     
  • -webkit-flex: initial;    
  •     
  •           flex: initial;   
  •     
  •   width200px;   
  •     
  •   min-width100px;   
  •     
  • /*空间足够的时候,该div的宽度是200px,如果空间不足,该div会变窄到100px,但不会再窄了。*/  
  •     
  • }   
  •     
  • .none {   
  •     
  •   -webkit-flex: none;   
  •     
  •           flex: none;   
  •     
  •   width200px;   
  •     
  • /*无论窗口如何变化,我的宽度一直是200px。*/  
  •     
  • }   
  •     
  • .flex1 {   
  •     
  •   -webkit-flex: 1;   
  •     
  •           flex: 1;   
  •     
  •      /*改div会占满剩余宽度的1/3。*/  
  •     
  • }   
  •     
  • .flex2 {   
  •     
  •   -webkit-flex: 2;   
  •     
  •           flex: 2;   
  •     
  •   /*改div会占满剩余宽度的2/3。*/  
  •     
  • }   
  •   
  • 效果如下图所示:
    201648121657567.png (816×132)

    Example 3: flexbox基本页面布局

    CSS Code复制内容到剪贴板
    1. "container">   
    2.       
    3. "container">   
    4.       
    5.         
          
      •           
      •   
      •          "http://www.alloyteam.com/">menu1   
      •           
      •   
      •        
        
    6.         
    7.    "content">   
    8.          
    9.          ...   
    10.         
    11.          
        
    12.        ...   
    13.          
    14.    
      
  •     
  •   
  • .container {   
  •     display: -webkit-flex;   
  •     display: flex;   
  • }   
  • nav {   
  •       width200px/*固定宽度*/  
  • }   
  • .content{   
  •   -webkit-flex: 1; /*除去nav的固定宽度后,剩下的宽度都是属于content的*/  
  •             flex: 1;   
  • }  
  • 效果如下图所示:
    201648121714566.png (707×239)

    Example 4: flexbox的居中布局

    CSS Code复制内容到剪贴板
    1. "vertical-container">   
    2.   "vertically-centered">   
    3.     

        

    4.       CSS里总算是有了一种简单的垂直居中布局的方法了!   
    5.     

        
    6.      
    7.   
    8.   
    9. .vertical-container {   
    10.   display: -webkit-flex;   
    11.   display: flex;   
    12.   height300px;   
    13. }   
    14. .vertically-centered {   
    15.   marginauto;   
    16. }  

    201648121734925.png (822×323)

    PS:解决兼容性问题

    对于Flexbox 以前的几个版本可以使用Autoprefixer后处理程序来实现css3代码自动补全。比如:

    CSS Code复制内容到剪贴板
    1. display: flex;  

    编译后:

    CSS Code复制内容到剪贴板
    1. display: -webkit-box;   
    2. display: -webkit-flex;   
    3. display: -ms-flexbox;   
    4. display: flex;  

    如果你使用Sass,那么可以使用@mixin来解决flexbox版本兼容,直接@include进来就可以轻松解决三个版本的兼容问题;这样可以支持到IE10 +, 移动端浏览器和最新的FF, Safari, Chrome, IE11, Opera等。
    github项目地址:sass-flex-mixin

         

    版权声明

    本文仅代表作者观点,不代表本站立场。
    本文系作者授权发表,未经许可,不得转载。
    本文地址:/web/CSS/78205.html

    上一篇 : 一个div在浏览器水平居中的实现方法
    下一篇 : 使用Loader.css和css-spinners来制作加载动画的方法
    留言与评论(共有 0 条评论)
       
    验证码:

    热门文章

    最近发表

    标签列表

    潘少俊衡

    | 桂ICP备2023010378号-4

    Powered By EmpireCMS

    爱享小站

    中德益农

    谷姐神农

    环亚肥料

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢潘少俊衡友情技术支持