美文网首页
CSS技巧之Flex布局学习笔记

CSS技巧之Flex布局学习笔记

作者: shawnJ | 来源:发表于2017-07-28 20:52 被阅读0次

    【学习教材】
    阮一峰Flex布局教程(语法篇、实例篇)
    语法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
    实例篇:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
    【Flex属性速查】
    1.定义:
    容器:display:flex;
    行内元素:display:inline-flex;
    webkit内核浏览器:display:-webkit-flex;
    2.容器属性:
    1)flex-direction: row | column | row-reverse | column-reverse
    2)flex-wrap: nowrap | wrap | wrap-reverse
    3)flex-flow: <flex-direction> || <flex-wrap> //默认为row nowrap
    4)justify-content: flex-start | flex-end | center | space-between | space-around;
    5)align-items: flex-start | flex-end | center | baseline | stretch;
    6)align-content: flex-start | flex-end | center | space-between | space-around | stretch

    1. 项目属性:
      1)order: <integer>
      2)flex-grow: <number>
      3)flex-shrink: <number>
      4)flex-basis: <length> | auto
      5)flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
      6)align-self: auto | flex-start | flex-end | center | baseline | stretch;

    相关文章

      网友评论

          本文标题:CSS技巧之Flex布局学习笔记

          本文链接:https://www.haomeiwen.com/subject/eabflxtx.html