首页 > 其他 > 详细

弹性盒模型(上)

时间:2020-04-14 23:26:34      阅读:76      评论:0      收藏:0      [点我收藏+]
弹性盒
        作用:控制离它(最近的一层)子元素,布局方式。
        特点:
            ① 弹性盒子里面的离它最近的一层子元素都可以添加大小。
            ② 如果想让弹性盒子里面的一个子元素左右上下居中,只需要给子元素添加margin:auto即可
            ③ 弹性盒子里面的子元素都是沿着“主轴”排列(注:默认情况下X轴为主轴。)
     一:触发弹性盒子:
             display:flex;

    二:改变主轴的方向:
        flex-direction:
            属性值:
                row     (默认值:X轴为主轴)
                column  (Y轴为主轴)
                column-reverse    (以Y轴为主轴反向排列)
                row-reverse    (以X轴为主轴反向排列)

    三:改变主轴的对齐方式:
        justify-content:
            属性值:
                flex-start   默认状态:在弹性盒子开始的地方显示
                flex-end     在弹性盒子末端对齐
                center        居中对齐
                space-between    两端对齐
                space-around     自动分配间距
 
    四:侧轴的对齐方式:
        align-items:
            flex-start    侧轴开始的位置
            flex-end      侧轴结束的位置
            center        侧轴居中的位置
            baseline      基线(flex-start等效)
            stretch(默认值)   拉伸
 
    五:控制弹性盒子里面的子元素换行处理:
        flex-wrap:
            wrap         换行
            nowrap       不换行
            wrap-reverse   反向换行

    六:控制行与行的对齐方式:
        align-content:
                flex-start   默认状态:行与行之间不存在默认的行间距
                flex-end     在弹性盒子末端对齐
                center        居中对齐
                space-between    两端对齐
                space-around     自动分配间距
 
    七:补充:flex-direction 和 flex-wrap简写:
        flex-flow:;
    
注:以上7个属性全部添加在父元素弹性盒子上面
                

弹性盒模型(上)

原文:https://www.cnblogs.com/FX177/p/12701951.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!