发布于 5年前

CSS3 Flex布局教程

Flex是一种弹性布局,要分为两部分理解Flex:

  • 作用于容器(flex-container)的属性
  • 作用于容器里项目(flex-item)的属性

Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。

  • 主轴(main axis): Flex方向设定为水平方向,主轴为水平方向,Flex设定为垂直分布,主轴为垂直方向。
  • 交叉轴(cross axis): 与主轴垂直交叉的轴。
  • 主尺寸(main size):主轴方向的尺寸。
  • 交叉尺寸(cross size):交叉轴方向的尺寸。

Flex容器属性

display

应用Flex布局,首先需要确定容器,对容器设定display为flex。

.container {
  display: flex; /* 或者 inline-flex */
}

Flex布局方向:flex-direction


容器首先要设定容器内项目的分布方向。

flex-direction用来设定容器内项目的分布方向。

语法

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row:水平向右,默认值
  • row-reverse:水平向左
  • column:垂直向下
  • column-reverse:垂直向上

换行:flex-wrap

默认情况下,Flex布局的容器内项目都放置在一行(row/row-reverse表示横行,colum/column-reverse表示纵行)内。对于很多项目的情况,所有的项目放在一行内会显得很拥挤。属性flex-wrap可以让我们设定在一个方向上的项目是否允许换行。

语法

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap:不允许换行,默认值
  • wrap:允许换行,按顶部到底部的方向换行
  • wrap-reverse:允许换行,按底部到顶部的方向换行

主轴上对齐:justify-content

justify-content属性定义了项目在容器主轴上的对齐方式。它有六个值表示不同的对齐方式:

语法

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  • flex-start:起始端对齐。不同的flex-direction,起始端不同。
  • flex-end:末端对齐。不同的flex-direction,末端不同。
  • center:居中对齐。
  • space-between: 两端对齐。
  • space-around:项目的两端空白空间相等对齐,项目之间的空间为两个空白空间。
  • space-evenly:项目等间距对齐,包括主轴方向上的两端间距。

行内交叉轴对齐:align-items

align-items定义在一行内(row/row-reverse表示横行,colum/column-reverse表示纵行)项目的对齐方式,有点类似于文本的行内对齐。

语法:

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start:行内交叉轴的起始端对齐
  • flex-end:行内交叉轴的末端对齐
  • center:行内居中对齐
  • baseline:基线对齐
  • stretch:行内两端延伸对齐

多行交叉轴对齐:align-content

align-content定义了多行整体在交叉轴的对齐方式,这是有区别align-items定义的行内对齐方式。

语法:

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start:交叉轴方向上起始端对齐
  • flex-end:交叉轴方向上末端对齐
  • center:交叉轴方向上居中对齐
  • stretch:交叉轴方向上两端延伸对齐
  • space-between:交叉轴方向上两端对齐。
  • space-around:交叉轴方向上,项目两端空白空间相等,项目间空间为两个空白空间。

Flex项目属性

项目顺序:order

项目默认按代码的顺序排列。使用order属性则可以使用改变项目的排列顺序。

.item {
  order: <integer>; /* default is 0 */
}

默认值为0,order值大往后排列。

项目扩大空间占比:flex-grow

flex-grow定义了项目在容器剩余空间的扩大比例。

  • 默认值为0,表示项目按指定的尺寸排列,不扩大。
  • 都为1,表示所有项目均分剩余空间。
  • 一个项目为2,其他项目为1,表示此项目占的空间是其他项目的两倍。

语法:

.item {
  flex-grow: <number>; /* default 0 */
}

项目收缩:flex-shrink

多个项目时,如果空间不够,那么项目需要收缩。flex-grow默认值为1。

项目的flex-shrink的值为0,其他项目值为1时,当容器的空间不足,那么其他项目按等比例收缩,flex-shrink为0的项目不收缩。

语法:

.item {
  flex-shrink: <number>; /* default 1 */
}

项目在分配剩余空间前的尺寸:flex-basis

flex-basic定义了项目在分配剩余空间前的尺寸。

语法:

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

flex-basis的值可以是百分比或空间尺寸。

flex-basis值为0,项目不参与额外空间的分配
flex-basis值为auto,项目根据flex-group的设置分配额外的空间

项目组合属性:flex

flex为flex-group,flex-shrink和flex-basis属性的组合。推荐使用此属性代替其他属性。

语法:

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

行内交叉轴对齐:align-self

align-items定义了行内所有的项目在交叉轴上的对齐方式,align-self则定义单个项目在交叉轴的对齐。

语法:

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
©2020 edoou.com   京ICP备16001874号-3