弹性布局学习-介绍(一)

目录                  

                弹性布局学习-介绍(一)      

                    弹性布局学习-详解 flex-direction【决定主轴的方向】(二) 

                    弹性布局学习-详解 justify-content(三) 

                    弹性布局学习-详解 align-items(四) 

                    弹性布局学习-详解flex-wrap(五)             

                 

  

                        布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

                                    

 

                         弹性布局也叫伸缩盒布局，在使用过程中，十分的方便，避免了使用float的烦恼，此元素兼容性测试如下:               

                    

新概念

两端对齐布局（传统）

 

 section ul {

        }
        section li {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 20px;
            float: left;
            background-color: pink;
            margin-right: 192px;
            list-style: none;
        }

 

 

 

两端对齐布局（伸缩布局）

 

  section ul {
            display: flex;
            justify-content: space-between;
        }
        section li {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: pink;
            list-style:none;
        }

 

 注:  在flex布局的时候，需要注意行内元素（a, input, textarea, span, i等），需要根据情况设置成display: block;