zoukankan      html  css  js  c++  java
  • flexbox 的相关属性的运用

    若是用 JS 动态的添加 html 元素到有 flexbox 属性的元素上,那么渲染的时候 可能会有问题。

    CSS 代码如下:

    .display-flex {
      /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
      display: -webkit-box;
      /* OLD: Firefox (buggy) */
      display: -moz-box;
      /* MID: IE 10 */
      display: -ms-flexbox;
      /* NEW, Chrome 21–28, Safari 6.1+ */
      display: -webkit-flex;
      /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
      display: flex;
    }
    /*
      里面的直接子元素相对于外层容器 水平居中,
      就可以不用table 让未知宽度的元素水平居中了
    */
    .display-flex.justify-content-center {
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
    }
    /*
        里面的直接子元素相对于外层容器 垂直居中
    */
    .display-flex.align-items-center {
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    /* 设置column 为竖向排列, 默认属性是row 横向排列 */
    .display-flex.flex-direction-column {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;
    }
    /*让子元素都有相同的长度*/
    .display-flex .flex1{
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -ms-box-flex: 1;
      -ms-neg-flex: 1;
    
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
    
    .div-box{
      height: 200px;
      border:1px solid red;
    }
    .div1{
      height: 100px;
      background-color:red;
    }

    HTML 的代码

    例子1: 

    <!-- 什么都不加 -->
    <div class='div-box'>
        <div class='div1'>aaaa</div>
        <div class='div2'>bbbb</div>
    </div>

     例子2:

    <!-- 只加 display-flex -->
    <div class='div-box display-flex'>
        <div class='div1'>aaaa</div>
        <div class='div2'>bbbb</div>
    </div>

    例子3:

    <!-- 加 display-flex 和 flex1 -->
    <div class='div-box display-flex'>
        <div class='div1 flex1'>aaaa</div>
        <div class='div2 flex1'>bbbb</div>
    </div>

    例子4:

    注意这个时候不要加 flex1, 否则居中看上去就不起作用了, 因为它们两个各占一半的宽度。

    <!-- 加 display-flex 和 justify-content-center -->
    <div class='div-box display-flex justify-content-center'>
        <div class='div1'>aaaa</div>
        <div class='div2'>bbbb</div>
    </div>

    例子5:

    <!-- 加 display-flex 和 align-items-center -->
    <div class='div-box display-flex align-items-center'>
        <div class='div1'>aaaa</div>
        <div class='div2'>bbbb</div>
    </div>

    例子6:

    <!-- 加 display-flex 和 align-items-center 和 flex1 -->
    <div class='div-box display-flex align-items-center'>
        <div class='div1 flex1'>aaaa</div>
        <div class='div2 flex1'>bbbb</div>
    </div>

    例子7:

    <!-- 加 display-flex 和 align-items-center 和 justify-content-center -->
    <div class='div-box display-flex align-items-center justify-content-center'>
        <div class='div1'>aaaa</div>
        <div class='div2'>bbbb</div>
    </div>

    例子8:

    <!-- 加 display-flex 和 align-items-center 和 justify-content-center 和 flex-direction-column -->
    <div class='div-box display-flex align-items-center justify-content-center flex-direction-column'>
        <div class='div1'>aaaa</div>
        <div class='div2'>bbbb</div>
    </div>

    参考地址:  https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/

    附几张兼容性属性的截图:

  • 相关阅读:
    如何设置ASP.NET页面的运行超时时间
    日志文件清理工具V1.1
    【原创】日志文件清理工具V1.0
    【分享】国外后台界面HTML源码 [免费]
    【分享】仿东软OA协同办公服务管理源码
    年底发福利了——分享一下我的.NET软件开发资源
    由12306动态验证码想到的ASP.NET实现动态GIF验证码(附源码)
    【分享】元旦送礼,商业源码免费赠送!
    给大家分享一个jQuery TAB插件演示
    【分享】双12了,也没啥可送大家的,就送大家点商业源码吧!
  • 原文地址:https://www.cnblogs.com/zhengming2016/p/5675117.html
Copyright © 2011-2022 走看看