CSS Flex样式

2021年10月15日 99 字 CSS

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>;
}

本文作者: 史迪奇
本文链接: https://sdq3.ml/CSS-Flex.html