基本概念

  • flex是CSS中一种布局手段，它主要用来代替浮动来完成页面的布局

  • 可以使元素具有弹性，让元素可以跟随页面的大小改变而改变

  • flex 容器中默认存在两条轴，主轴(main axis) 和侧轴(cross axis)

  • 19 flex布局 - 图1

  • 容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

    flex弹性容器

  • 实现 flex 布局需要先指定一个容器，这样容器内部的元素就可以使用 flex 来进行布局。

.container``{
display: flex | inline-flex; //可以有两种取值
}

  • 分别是生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex。而如果你使用行内元素，你可以使用 inline-flex。

  • 需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

    弹性元素

  • 弹性容器的直接子元素是弹性元素（弹性项）

  • 一个元素可以同时是弹性容器和弹性元素

    应用在弹性容器的属性

    具体属性查https://www.runoob.com/css3/css3-flexbox.html

    1、flex-direction: 决定主轴的方向(即项目的排列方向)

  • flex item 默认沿着主轴的方向排列

    • row从左到右
    • column从上往下
    • row-reverse横向反向
    • column-reverse纵向反转

      2、justify-content：设置主轴上元素如何排列

      flex-start/flex-end/center/space-between/space-evenly/space-around

      3、align-content 设置各行在辅轴的对齐方式

      属性与justify-content相同。有多行时才需要，一行用不到

      4、align-items设置元素在辅轴的对齐方式

      没有设置高度的话会按设置拉伸

      5、flex-wrap: 设置容器内项目是否自动换行（重点)

      默认情况下所有的item都会在同一行显示

      6、flex-flow:缩写属性包括direction和wrap


      应用在弹性元素的属性

      1、order决定元素排布的顺序

      用整数值来定义排列顺序，数值小的排在前面。可以为负值。
      不需要再在结构上调整

      2、align-self单独设置某个元素的交叉轴对齐方式

      3、flex-grow指定弹性元素的伸展系数

  • 当父元素有多余空间时，子元素如何伸展

  • 父元素的剩余空间会按照比例进行分配
  • 可以设置为任意非负数字（正小数、正整数、0）。默认为0

  • 当flex-container在主轴上有多余的空间时才有效

    4、flex-shrink指定弹性元素的收缩系数

  • 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩

  • 缩减系数的计算方式比较复杂
  • 缩减多少是根据缩减系数和元素大小计算的
  • 可以设置为任意非负数字（正小数、正整数、0）默认为1，0不收缩

  • 当item在主轴方向上超过了container的size，shrink属性才会有效

    5、flex-basis设置元素在主轴上的基础大小

    默认为auto表示按照设定的宽高

  • 如果主轴是横向，则指定的是宽度

  • 如果主轴是横向，则指定的是高度

决定item最终的size的因素，优先级从高到低为

  • max
  • flex basis
  • width/height
  • 内容本身的size

    6、缩写属性flex 包含flex-grow|flex-shrink|flex-basis

    只写一个值，若为无单位数，会被当做grow
    若为有限的宽度。。。。。一系列规则不用记

**

**