码迷，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）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！