flex布局详细介绍

目录

• 简介
  • Flex：“Flexible box”的缩写，即弹性布局
  • 轴
    • x为主轴，y轴为交叉轴
  • 开始
  • 容器属性（父）
    • flex-direction（子元素排列起点）
      • row（默认）起点在左
      • row-reverse 起点在右
      • column 起点在上
      • column-reverse 起点在下
      • 附图

        

    • flex-wrap(如何换行)
      • nowrap（默认） 不换行

        

      • wrap 换行：从左到右、从上到下的次序换行

        

      • wrap-reverse 换行：从左到右、从下到上

        

    • flex-flow
      • 等于flex-direction加flex-wrap
        • 语法 flex-flow:<flex-direction> || <flex-wrap>
    • justify-content(调整内容：在主轴上的对齐方式)
      • flex-start（默认值）----向起点方向对齐
      • flex-end----向终点方向对齐
      • center----居中
      • space-between 分散开来
      • space-around----可以理解为内边距一样
      • space-evenly ----空间距离一样
      • 附图

        

    • align-items（调整内容：在交叉轴上如何对齐）
      • flex-start ---- 向起点方向对齐
      • flex-end ---- 向终点方向对齐
      • center ---- 居中
      • baseline ---- 基线对齐
      • stretch（默认值）
      • 附图

        

      • 注意：align-items属性跟flex-direction息息相关，flex-direction值为row时，align-items的对齐的轴是y轴，flex-direction值为column时，对齐的轴是x轴，这就是交叉轴的含义。
    • align-content（多轴线（换行情况下）才会生效）
      • flex-start
      • flex-end
      • center
      • space-between
      • space-around
      • stretch
      • 附图

        

  • 子元素属性（子）
    • order
      • 语法 ---- .item{order:<integer>; /*默认值为0*/}
      • 排序 ---- 从小到大
      • 附图

        

    • flex-grow
      • 放大比例
        • 默认为0 ---- 不分配任何剩余空间
        • 作用：对剩余空间进行分配
        • 附图

          

          • 把剩余空间看作一个蛋糕
          • 第1行，设置三个项目此属性值为1
          • 则，等于把蛋糕分三份，一人一份
          • 第2行，中间的调整为2
          • 则，等于把蛋糕分成四份，中间的占2份，其他占1份
    • flex-shrink
      • 缩小比例 ---- 默认为1，即如果空间不足，该项目将缩小，0就不压缩
      • 附图

        

    • flex-basis
      • 当作宽：当flex-direction：row或flex-direction：row-reverse时
      • 当作高：当flex-direction:column或flex-direction：column-reverse时
      • 与width/height的区别，
        • flex-basis优先级比width/height高
        • flex-basis=auto，优先级让给width/height
    • flex
      • 等于flex-grow 加 flex-shrink 加 flex-basis
        • 语法 auto | initial | none | inherit || [flex-shrink] || [flex-basis]
        • flex = auto
          • flex-grow = 1 ---- 参与分配剩余空间
          • flex-shrink = 1 ---- 收缩比例
          • flex-basis = auto
        • flex = initial
          • flex-grow = 0 ---- 不参与分配剩余空间
          • flex-shrink = 1 ---- 收缩比例
          • flex-basis = auto
        • flex = none
          • flex-grow = 0 ---- 不参与分配剩余空间
          • flex-shrink = 0 ---- 收缩比例(不收缩)
          • flex-basis = auto
        • flex = inherit 继承父亲的
    • align-self
      • 覆盖容器（父亲）的align-items属性
  • 浏览器支持
  • 参考文献