您现在的位置是：网站首页> 编程资料编程资料

基础的CSS3弹性盒Flexbox布局使用实例10分钟理解CSS3 FlexBox弹性布局CSS3 Flex 弹性布局实例代码详解css flex 弹性布局详解实例讲解CSS3中的box-flex弹性盒属性布局CSS3弹性盒模型flex box快速入门心得(必看篇)flex弹性盒布局最后一行左对齐的实现思路

2021-09-05 841人已围观

简介 这篇文章主要介绍了基础的CSS3弹性盒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%;   
  •     
  •     float: left;   
  •     
  •     border-right: 1px solid #fa9900;   
  •     
  •     padding: 5px 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-right: 1px solid #fa9900;   
    14.     
    15.      padding: 5px 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;   
  •     
  •   width: 200px;   
  •     
  •   min-width: 100px;   
  •     
  • /*空间足够的时候，该div的宽度是200px，如果空间不足，该div会变窄到100px，但不会再窄了。*/  
  •     
  • }   
  •     
  • .none {   
  •     
  •   -webkit-flex: none;   
  •     
  •           flex: none;   
  •     
  •   width: 200px;   
  •     
  • /*无论窗口如何变化，我的宽度一直是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.         

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网