码迷,mamicode.com
首页 > 其他好文 > 详细

弹性盒布局

时间:2020-05-26 20:08:26      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:start   默认   垂直居中   ems   布局   简单   默认值   居中   rev   

一、什么是弹性盒布局(可伸缩的盒子)
        
    优势:1》写起来比较简单
          2》灵活性、代码优雅

    缺点:1》不兼容ie和安卓低级版本


新弹性盒(讲)
老弹性盒

二、使用

    
    容器            (父元素)

        display:flex   : 让容器成员是弹性的项目
        flex-direction : 决定主轴是什么方向(项目排序方向)
                         row    : 横向
                         column : 竖的
                         row-reverse :横向翻转
                         column-reverse :竖的翻转
        
        flex-wrap      : 让项目是否换行

                        nowrap : 不换行
                        wrap   : 换行
                        wrap-reverse :换行翻转
        
        flex-flow      : direction wrap
         
        justify-content : 横向盒子摆放

                        flex-start    : 靠左
                        flex-end      : 靠右
                        center        : 水平居中
                        space-between : 项目两端对齐,项目之间的距离都相等
                        space-around  : 每个项目两侧距离相等,两侧距离比项目之间的距离小一倍
        
        algin-items     : 纵向盒子摆放

                        flex-start     : 靠上
                        flex-end       : 靠下
                        center         : 垂直居中
                        baseline       : 项目第一行文字为基线
                        stretch        : 如果容器没有设置高度或者auto则占满整个高度
    
    容器成员|项目 (子元素)

            
            order       : 排序方式,数值越小,越靠前
            flex-grow   : 默认值0,比例放大
            flex-shrink : 默认值1,比例缩小
            flex-basis  : 相当于width
            flex:       :复合(grow + shrink + basis)
                        默认值:0 1 auto
                        
                        后俩个值是可选择

弹性盒布局

标签:start   默认   垂直居中   ems   布局   简单   默认值   居中   rev   

原文地址:https://www.cnblogs.com/1609359841qq/p/12967826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!