CSS Flex 布局学习笔记

概述

Flex 是 Flexible Box 的缩写，意为 弹性盒模型。

任何一个容器都能够采纳 Flex 布局。

.box {display: flex;}

行内元素也能够应用 Flex 布局。

.box {display: inline-flex;}

留神 ：容器设为 Flex 布局后，子元素的float、clear 和vertical-align属性将生效。

基本概念

采纳 Flex 布局的元素称为 Flex 容器（Flex Container），简称 容器 ，其所有子元素称为 Flex 我的项目（Flex Item），简称 我的项目。

容器默认存在两根轴：程度的主轴（main axis）和垂直的穿插轴（cross axis）。主轴的开始地位（与边框的交叉点）称为main start，完结地位称为main end；穿插轴的开始地位称为cross start，完结地位称为cross end。我的项目默认沿主轴排列。单个我的项目占据的主轴空间称为main size，占据的穿插轴空间称为cross size。

容器的属性

flex-direction属性

flex-direction属性用于指定主轴的方向（即我的项目的排列方向）。

.box {
  /* row：主轴为程度方向，终点在左端（默认）*/
  /* row-reverse：主轴为程度方向，终点在右端 */
  /* column：主轴为垂直方向，终点为上沿 */
  /* column-reverse：主轴为垂直方向，终点为下沿 */
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap属性

默认状况下，我的项目排列在一条轴线上。flex-wrap属性用于指定当一条轴线无奈包容所有我的项目时如何换行。

.box {
  /* nowrap：不换行（默认）*/
  /* wrap：换行，第一行在上方 */
  /* wrap-reverse：换行，第一行在下方 */
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap: wrap-reverse

flex-flow属性

flex-flow属性是 flex-direction 属性和 flex-wrap 属性的合并简写模式，默认值为row nowrap。

.box {flex-flow: <flex-direction> || <flex-wrap>;}

justify-content属性

justify-content属性用于指定我的项目在主轴上的对齐形式。

.box {
  /* flex-start：左对齐（默认）*/
  /* flex-end：右对齐 */
  /* center：居中 */
  /* space-between：我的项目与我的项目的距离相等，我的项目与容器边框之间没有距离 */
  /* space-around：每个我的项目两侧的距离相等（我的项目之间的距离比我的项目与容器边框的距离大一倍 */
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items属性

align-items属性用于指定我的项目在穿插轴上的对齐形式。

.box {
  /* flex-start：穿插轴上沿对齐 */
  /* flex-end：穿插轴下沿对齐 */
  /* center：穿插轴中点对齐 */
  /* stretch：拉伸，占满整个容器（默认）*/
  /* baseline：我的项目第一行文字的基线对齐 */
  align-items: flex-start | flex-end | center | stretch | baseline;
}

align-content属性

align-content属性用于指定多个轴线的对齐形式。（若只有一根轴线，则该属性不起作用。）

.box {
  /* flex-start：穿插轴上沿对齐 */
  /* flex-end：穿插轴下沿对齐 */
  /* center：穿插轴中点对齐 */
  /* stretch：拉伸，占满整个穿插轴（默认）*/
  /* space-between：轴线与轴线的距离相等，轴线与穿插轴高低沿之间没有距离 */
  /* space-around：每个轴线两侧的距离相等（轴线之间的距离比轴线与穿插轴高低沿的距离大一倍 */
  align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}

我的项目的属性

order属性

order属性用于指定我的项目的排列程序。数值越小排列越靠前，默认为0。

.item {order: <integer>;}

flex-grow属性

flex-grow属性用于指定有残余空间时我的项目的放大比例。默认为 0，即便有残余空间也不放大。若所有我的项目的flex-grow 属性值相等，则等分残余空间；若不相等，则按比例划分残余空间。

.item {flex-grow: <number>;}

flex-shrink属性

flex-shrink属性用于指定空间有余时我的项目的放大比例。默认为 1，即空间有余时进行放大。若flex-shrink 属性设为 0，则不进行放大。若所有我的项目的flex-shrink 属性不相等，则依照比例进行放大。

.item {flex-shrink: <number>;}

flex-basis属性

flex-basis属性用于指定在调配残余空间前我的项目占用的主轴空间（main size）。浏览器依据这个属性计算主轴的残余空间。默认为auto，即我的项目原本的大小。

.item {flex-basis: <length> | auto;}

flex属性

flex属性是 flex-grow 属性、flex-shrink属性和 flex-basis 属性的合并简写模式（后两个属性可选），默认为 flex: 0 1 auto;。 倡议优先应用这一合并简写模式。

.item {flex: auto | none | <flex-grow> <flex-shrink> <flex-basis>;}

该属性的两个快捷值：auto（1 1 auto）和none（0 0 auto）。

align-self属性

align-self属性用于指定单个我的项目应用与父元素 align-items 属性不同的穿插轴对齐形式，可笼罩 align-items 属性，默认为 auto，示意继承父元素的align-items 属性，若没有父元素则等同于stretch。

.item {
  /* 除 auto 外均与 align-items 属性的可选值雷同 */
  align-self: auto | flex-start | flex-end | center | stretch | baseline;
}