zoukankan      html  css  js  c++  java
  • flex布局

    html片段

    <div id="wrap">
        <div id="header">头部</div>
        <div id="content">主体部分</div>
        <div id="footer">底部</div>
    </div>
    

    css片段

    #wrap{
        display: flex;
        flex-flow: column nowrap;   
        /**
         * flex-flow属性是: 
         * flex-direction: row | row-reverse | column | column-reverse 
         * 和
         * flex-wrap: nowrap | wrap | wrap-reverse 
         * 两个属性的简写形式
         */
        height: 100%;
    }
    #header{
        height: 2.4rem;
        background: #55CBC4;
        flex-grow: 0; 
        color: #fff;
        text-align: center;
         100%;
        line-height: 2.4rem;
    }
    
    #content{
        flex: 1 1 1;
        /**
         * flex属性是:
         * flex-grow: <number>
         * flex-shrink: <number>
         * flex-basis: <length> | auto
         * 三个属性的简写形式
        */
        height: 100%;
    }
    #footer{
        height: 2.4rem;
        background: #eee;
        flex-grow: 0;
    }
    

    其他属性说明

    属性 属性值 作用
    flex-direction row-横向 column-纵向 决定主轴方向
    justify-content flex-start 、 flex-end 、center 、space-between 、 space-around 在主轴方向上的对齐方式
    align-items flex-start 、 flex-end 、 center 、 baseline 、 stretch 与主轴垂直方向上的对齐方式
    flex-grow 放大比例
    flex-shrink 缩小比例
    flex-basis 、auto 是否分配多余空间
  • 相关阅读:
    重复的listen port引发的问题
    Win10开始运行不保存历史记录原因和解决方法
    意识到const版本函数的重要性
    人物访谈1
    人物访谈2
    读《浪潮之巅》有感
    测试作业
    读《活出生命的意义》有感
    价值观作业
    关于C语言的问卷调查
  • 原文地址:https://www.cnblogs.com/stone-it/p/7326977.html
Copyright © 2011-2022 走看看