css学习笔记 flex

Posted on | In ,
  1. flex布局内的块状元素和行内元素
    • display:flex
      子元素若为行内元素，将无法设置宽高，需要手动设置display:block/inlinebox
    • display:inline-flex
      这是指这是一个行内级的flex包含块，即作用于父包含块而不是子元素。

  2. flex-direction为 row 或 column 的时候
    该属性下为row或column是水平居中和垂直居中是相反，即

    1
    2
    3
    4
    5
    .a{
        flex-direction:column;
        justify-content:center; //水平居中
        align-items:center; //垂直居中
    }

  3. flex 和 box 的区别
    各阶段草案命名不同，基本实现效果一样，除了以下区别

    • 与子元素 display 方式的相关性不同
      • display:box; 作用下，如果子元素是 block 的，竖着排，如果子元素是 inline、inline-block 的，横着排。
      • display:flex; 作用下，是横着排还是竖着排，只取决于 flex-direction 的值是 row 还是 column。
    • float 等属性是否受影响的情况不同
      • display:box; 作用下，float、clear、text-align、vertical-align 仍起作用。
      • display:flex; 作用下，上述四属性失效。
    • 横向排列时，子元素之间空白字符（空格、换行等）处理不同
      • display:box; 作用下，不会被忽略。
      • display:flex; 作用下，忽略。