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 是否分配多余空间
  • 相关阅读:
    奇迹银桥「1」
    20190729-“退役”专场
    20190727-只是睡着了
    $mathcal{Miemeng}$的病态码风计划
    20190725-Silly
    作业-[luogu4396][AHOI2013]-莫队
    数学网学笔记
    20190722-Moni和Boly的故事
    数学学习笔记
    20190719-FirstZero
  • 原文地址:https://www.cnblogs.com/stone-it/p/7326977.html
Copyright © 2011-2022 走看看