Flex 弹性盒模型

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

一、flex的浏览器内核兼容写法
{
display:-webkit-flex;
display:-moz-box;
display:-mz-flexbox;
display:flex;
} 

二、容器上的六个属性、容器内的子项目上的六个属性

①、容器上的六个属性：

       flex-direction: 决定子项目主轴的方向（默认值为row）

       flex-wrap: 决定子项目是否换行（默认值是不换行nowrap）

       flex-flow: direction wrap的合并写法

       justify-content: 决定子项目(水平)横向布局方式（默认值flex-start）

       align-items: 决定子项目(垂直)纵向布局方式（默认值stretch）

       align-content: 子项目有多列时，决定子项目的纵向布局方式（默认值flex-start）

②、容器内的子项目的六个属性：

       order: 设置子项目的顺序(默认为0)

       flex-grow:  子项目是否可扩大（默认为0，不扩大）

       flex-shrink:   子项目是否可缩小（默认为1，可缩小）（0是false,1是true）

       flex-basis:  设置子项目的初始宽度（默认为auto）

       flex: grow、shrink、basis合并

       align-self: 设置子项目(垂直)纵向方向的位置（默认值stretch）

 

总结：

footer{
             height: 60px;
              line-height: 60px;
              background-color: #fff;
              width: 100%;    
        }
        footer ul{
           border-top: 1px solid #e3e3e3;
           text-align: center;
           display: -webkit-box;    
           display: -webkit-flex;    
           display: flex;  
        }
        footer ul li{
            flex-flow: row nowrap;
              justify-content:space-between;
              flex-grow:1;
              text-align: center;
              
        }

display：flex 属性如果加在 footer上 ，则失效。 display：flex 只对子元素有效。

 

 

来源：前端开发博客

参考： https://www.cnblogs.com/qingchunshiguang/p/8011103.html

http://caibaojian.com/flexbox-guide.html

https://blog.csdn.net/w390058785/article/details/83543198

 

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

 

转载于:https://www.cnblogs.com/xiaohuizhenyoucai/p/11358040.html