zoukankan      html  css  js  c++  java
  • flexbox备忘

    伸缩项目的父元素:

      display:flex || display:inline-flex
      fiex-direction: row(默认) | row-reverse | column | column-reverse
      flex-wrap : nowrap(默认) | wrap | wrap-reverse
      flex-flow(flex-direction+flex-wrap): row nowrap (默认)

      主轴对齐方式(横向):
        justify-content: flex-start(默认) | center | flex-end
                space-between | space-around

      侧轴对齐方式(竖向):
        align-items:flex-start | center | flex-end
        baseline | stretch(默认)

      多行,竖向(必须设置flex-wrap:wrap才有效):
        align-content:flex-start | center | flex-end
               space-between | space-around
               stretch(默认)

    伸缩项目的子元素:
    order: 0
    flex-grow:1(不可以有负数) 放大一定的倍数
    flex-shrink:1(不可以有负数) 缩小一定的倍数
    flex-basis:0 数字px,百分比(不可以负数) 剩余的空间按比率进行伸缩

    flex: flew-grow flew-shrink flew-basis的组合;

    flex:0 1 auto == flex:initial == flex:0 auto(默认值);
    flex:none == flex:0 0 auto;

    flex:auto == flex:1 1 auto;

    align-self(跟align-items一样):
    flex-start | center | flex-end | baseline | stretch

    参考资料:

    http://www.w3cplus.com/css3/a-guide-to-flexbox.html

    http://www.w3cplus.com/css3/a-guide-to-flexbox-new.html

    https://www.w3.org/html/ig/zh/css-flex-1/#flex-basis

    https://segmentfault.com/q/1010000004080910

  • 相关阅读:
    Mysql推荐使用规范
    程序员应该经常浏览的技术网站
    百度,腾讯,阿里等互联网公司年终奖发多少
    JNI技术详解,让程序有飞一般的感觉
    日志:分布式系统的核心
    Spring Boot七:Spring boot集成MyBatis
    通俗理解TCP的三次握手
    JDBC添加数据
    JDBC概念
    今天是阳光明媚的一天
  • 原文地址:https://www.cnblogs.com/joya0411/p/5360513.html
Copyright © 2011-2022 走看看