弹性盒的属性分为两部分

弹性盒的属性分为两部分：

父元素：

• display：flex/inline-flex;

  • flex:块级弹性盒;
  • inline-flex:行内块级弹性盒;
  • 注意:设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
  • 弹性盒只针对第一级子元素生效；

• flex-direction属性 决定主轴的方向

  • row ： 在左向右的方向（默认值）
  • row-reverse ： 翻转主轴水平方向的位置： 自右向左
  • column ： 自上而下的方向 (比较常用)
  • column-reverse ：翻转垂直方向的位置：自下而上的方向

• flex-wrap属性，定义子元素是否换行显示

  • nowrap： 不换行 (默认值)
  • wrap ： 换行 （常用）
  • wrap-reverse：翻转wrap显示

• justify-content属性 定义了项目在主轴（）上的对齐方式。

  • flex-start ：(默认值) 沿着主轴的起始点对齐的；
  • flex-end ：沿着主轴的终点对齐的；
  • center ： 沿着主轴的居中位置对齐的；
  • space-between ： 两端对齐，中间自由分配
  • space-around ：在元素左右自动分配距离
  • space-evenly; 设置元素之间的空隙相等

• align-items属性定义侧轴方向是如何对齐。

  • flex-start ：沿着侧轴的起始点对齐的；
  • flex-end ： 沿着侧轴的终点对齐的；
  • center ： 沿着侧轴的中间位置对齐的；（相对比较常用）
  • baseline ： 沿着侧轴的基线对齐的
  • stretch（默认值）：拉伸至同父元素一样高；

• align-content属性定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。

  • align-content在侧轴上执行样式的时候，会把默认的间距给合并
  • flex-start 没有行间距 沿顶部对齐
  • flex-end 底对齐没有行间距
  • center 居中没有行间距
  • space-between 两端对齐，中间自动分配
  • space-around 自动分配距离
  • space-evenly ：设置元素之间的空隙相等
  • stretch 默认值。项目被拉伸以适应容器。 当子元素设置了高度后，在默认位置显示

  子元素：

  • align-self属性
    • auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
    • Stretch 元素被拉伸以适应容器。
    • Center 元素位于容器的中心。
    • flex-start 元素位于容器的开头。
    • flex-end 元素位于容器的结尾。

• order

  • number排序优先级，数字越大越往后排，默认为0，支持负数。
  • 默认情况下：按照HTML的书写顺序进行排列的；

• flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

  • 属性值：是一个数字，不用加单位
  • 默认值：0； 不扩展;
  • 属性值为1的时候就是扩展；
  • 1、2、3、4、5、6…

• flex-grow 会改变元素原有的大小；沿着主轴进行变化

• flex-shrink ：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

  • flex-shrink：1；
  • 默认值 ： 1： 收缩
  • 0：不收缩

• flex-basis： 项目的长度

  • flex-basis 的权重 大于width；
  • 复合式写法：flex（比较常用）

• flex-grow flex-shrink flex-basis

  • flex：1 2 3 4…
  • 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
  • 多列属性 多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。
  • column-count : 分隔列数
    • 说明：属性规定元素应该被分隔的列数
    • 用于：除table外的非替换块级元素, table cells, inline-block元素
  • column-gap ： 设置列与列之间的间隔大小；
  • column-rule ： 添加列与列之间的边框 复合属性。
  • column-rule-color规定列之间规则的颜色。
  • column-rule-style规定列之间规则的样式。
  • column-rule-width规定列之间规则的宽度。
  • column-fill : 设置列与列之间的高度是否统一

• auto：列高度自适应内容

• balance：所有列的高度以其中最高的一列统一 （默认值）

• column-span ： 跨列或者不夸列

  • 设置或检索对象元素是否横跨所有列。
  • none：不跨列 all：横跨所有列

• column-width : 设置或检索对象每列的宽度

  • 说明：当column-width 和column-count 同时存在的时候；
  • column-width ：最小宽度
  • column-count ：最多列数

• 复合式写法：

  • columns
  • column-width 和 column-count
  • columns：200px 5;
  • 注：Internet Explorer 10 和 Opera 支持多列属性。
    • Firefox 需要前缀 -moz-。
    • Chrome 和 Safari 需要前缀 -webkit-。

• break-inside CSS 属性描述了在多列布局页面下的内容盒子如何中断,如果多列布局没有内容盒子,这个属性会被忽略。

• auto：既不强迫也不禁止在元素内部断行并产生新列

• avoid：避免在元素内部断行并产生新列