flex布局

基本概念

Flex布局，也叫"弹性布局"，用来为盒模型提供最大的灵活性

任何一个容器都可以指定为Flex布局

/* 块级元素 */
.box {
 dispaly: flex;
}
/* 行内元素 */
.box {
 dispaly: inline-flex;
}

当父元素被设为flex布局后，子元素的float、clear和vertical-align属性都会失效

采用 Flex 布局的元素，称为 Flex 容器，简称为"容器"，它的所有子元素自动成为容器成员，称为 Flex 项目，简称为"项目"

容器属性

• flex-direction 设置容器内项目的排列方向

  row 从左向右排列（默认）

  row-reverse 从右向左排列

  column 从上向下排列

  column-reverse 从下向上排列

• flex-wrap 设置项目如何换行

  nowrap 不换行（默认）

  wrap 换行，多余的项目向下一行排布

  wrap-reverse 换行，多余的项目向上一行排布

• flex-flow flex-direction和flex-wrap的合并形式

  flex-flow:

  默认：flex-flow: row nowrap;

• justify-content 定义项目在主轴上的对齐方式（水平）

  flex-start 左对齐（默认）

  flex-end 右对齐

  center 居中

  space-between 两端对齐，两端项目居最右最左，中间项目等距分布

  space-around 均匀对齐，每个项目两侧都等距，所以项目之间的间距比项目与边框之间的大一倍

• align-items 定义项目在交叉轴上的对齐方式，只适用于单行元素（垂直）

  stretch 如果项目未设置高度或设为auto，将占满整个容器的高度（默认）

  flex-start 左上

  flex-end 左下

  center 居中

  baseline 项目的第一行文字的基线对齐

• align-items 定义项目在交叉轴上的对齐方式，只适用于单行元素（垂直）

  stretch 子元素等分父元素高度（默认）
  flex-start 左上

  flex-end 左下

  center 居中

  space-between 两端对齐，两端项目居最上最下，中间项目等距分布

  space-around 均匀对齐，每个项目两侧都等距，所以项目之间的间距比项目与边框之间的大一倍

项目属性

• order 定义了项目的排列顺序

  默认为0，值越小排列越前

  1~N

• flex-grow 定义了项目的放大比例

  默认为0，即如果存在剩余空间，也不放大

  如果所有项目的flex-grow属性都为1，则它们将等分剩余空间

  当其中的一个项目设置了flex-grow为1时，它将占据剩余空间的100%

  如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

  1~N

• flex-shrink 定义了项目的缩小比例

  默认为1，即如果空间不足，该项目将缩小

  如果所有项目的flex-shrink默认值1，则空间不足时，等比缩小

  如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，属性为0的不缩小

  如果一个项目的flex-shrink属性为2，其他项目都为1，则前者占据的剩余空间将比其他项少一倍

  1~N

• flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（宽度）

  它的默认值为auto，即项目的本来大小

  设置了flex-basis以后，就设定了项目的尺寸

  width跟flex-basis的区别是，flex-basis的优先级更高。

  如果设置的flex-basis的值不为auto，那么width设置什么值都无效，以flex-basis的值为准。只有当flex-basis的值为auto的时候，该项目才会是width设定的值

  1~N px

• flex flex-grow、flex-shrink和flex-basis的合并形式

flex:

默认：flex-flow: 0 1 auto;

flex: auto; 等同于 flex: 1 1 auto;

flex: none; 等同于 flex: 0 0 auto;

flex: 1;

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%

flex: 1; 等同于 flex: 1 1 0%;

flex: 100px;

当flex取值为一个长度或者是一个百分比时，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1

flex: 100px; 等同于 flex: 1 1 100px;

• align-self 设定单个项目的对齐方式，可覆盖align-items属性

  auto 继承父元素的align-items属性，如果没有父元素，则等同于 stretch

  flex-start 左上

  flex-end 左下

  center 居中

标签：flex,basis,auto,布局,默认,对齐,项目
来源： https://www.cnblogs.com/by0627/p/16034112.html