CSS个人整理

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

1
2
3

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局

1
2
3

.box{
  display: inline-flex;
}

Webkit 内核的浏览器, 必须加上-webkit前缀

1
2
3
4

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)

• row(默认值): 主轴为水平方向, 起点在左端
• row-reverse: 主轴为水平方向, 起点在右端
• column: 主轴为垂直方向, 起点在上沿
• column-reverse: 主轴为垂直方向, 起点在下沿

1
2
3

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap属性

默认情况下, 项目都排在一条线 (又称”轴线”)上flex-wrap属性定义, 如果一条轴线排不下, 如何换行

• nowrap (默认): 不换行
• wrap: 换行, 第一行在上方
• wrap-reverse: 换行, 第一行在下方

1
2
3

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式, 默认值为row nowrap

1
2
3

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