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

  • 相关阅读:
    Vue.js 章6 v-model与表单
    Vue.js 简单购物车开发
    Vue.js实战 章五:内置指令
    Vue stage3
    Vue初接触 stage1
    前端代码的一些恶优化
    websocket介绍 以及 vue websocket使用案例
    回忆一下跨域
    如何使用Flexible这样的一库来完成H5页面的终端适配
    css 输入px单位的数值 直接转换为rem的插件
  • 原文地址:https://www.cnblogs.com/joya0411/p/5360513.html
Copyright © 2011-2022 走看看