• 弹性盒布局


    一、什么是弹性盒布局(可伸缩的盒子)
            
        优势: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
                            
                            后俩个值是可选择
  • 相关阅读:
    [玩]用安卓手机搭建免费Linux服务器
    SSM自学教程
    outlook 2016 系列1--收件归类
    软件开发流程模型
    Android P系统编译之使用PRODUCT_COPY_FILES拷贝文件或文件夹
    车载系统交互的三秒原则
    同理心地图
    Excel 操作
    Android中5种最常见的内存泄漏问题以及解决办法
    android动画相关
  • 原文地址:https://www.cnblogs.com/1609359841qq/p/12967826.html
Copyright © 2020-2023  润新知