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

    关于flex布局,我觉得它在布局里简直就是一匹黑马,不愧为弹性布局

    阮一峰大神有一篇博客,讲的超级详细 (http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)地址献上....

    下面来举例一下 我平时是什么场合派它上战场

    1、左右居中

    HTML

    <div class="wrapper">
         <div class="box"></div>
    </div>

    CSS

    .wrapper{
        display: flex;
        justify-content: center;
    }

    2.左右上下居中

    CSS

    .wrapper{
        display: flex;
        justify-content: center;/*左右*/
        align-items: center;/*上下*/
    }

    3.6项目

    HTML

    <div class="wrapper">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    CSS

    .wrapper{
        display: flex;
        flex-wrap: wrap;
    }

    它还有很多很多的技能,这里我就不一一举例了,写这三个我常用的

    Emm 就是这样

  • 相关阅读:
    vue后台管理系统项目
    javascript面试题
    webpack学习
    js全局变量收集器
    Koa2框架token验证
    require.js使用
    Koa2中使用art-template模板和静态资源托管
    Koa2POST请求参数
    H5、C3、ES6的新特性
    H5视频播放
  • 原文地址:https://www.cnblogs.com/khun/p/9486428.html
Copyright © 2011-2022 走看看