Flex布局

Flex布局


title: Flex布局
date: 2019-08-30 00:03:31
tags: 笔记
categories: 技术

文章来源:菜鸟教程

一、何为Flex布局?

Flex是Flexible Box的缩写,意为“弹性布局”,用于盒状模型以提供最大灵活性。

任意容器皆可指定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布局后,子元素的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-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

  • ### 3.1 flex-direction > flex-direction属性决定主轴的方向,即项目排列方向
1
2
3
.box{
flex-direction:row|row-reverse|column|column-reverse;
}

如图所示:

它可能有四个值:

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

3.2 flex-wrap

默认情况下,项目都排在轴线上。flex-warp属性定义,如果一条轴线排不下的情况下,换行的方法

1
2
3
.box{
flex-warp:nowarp|warp|warp-reverse;
}

它可能取三个值:

  1. nowarp(默认):不换行。

  1. warp:换行,第一行在上方。

  1. warp-reverse:换行,第一行在下方。

3.3 justify-content

justify-content定义了项目在主轴上的对齐方式

1
2
3
.box{
justify-content:flex-start|flex-end|center|space-between|space-around;
}

效果如下:

它可能取五个值,具体对齐方式与轴的方向有关,假定主轴为从左至右。

  • flex-start(默认):左对齐
  • flex-end:右对齐
  • center:居中
  • space-between:两端对齐,项目之间间隔相等
  • space-around:每个项目两侧间隔相等,因此项目之间间隔比项目与边框之间间隔大一倍

3.5 align-items

align-items定义项目在交叉轴上如何对齐

1
2
3
.box{
align-items:flex-start|flex-end|center|baseline|stretch;
}

如图所示:

它可能取五个值。对齐方法与交叉轴方向有关,假设交叉轴从上至下

  • flex-start:交叉轴起点对齐
  • flex-end:交叉轴终点对齐
  • center:交叉轴中点对齐
  • baseline:项目的第一行文字的基线对齐
  • stretch(默认):如果项目未设置高度或者设置为auto,将占满整个容器高度

3.6 align-content

align-content定义了多根轴线的对齐方式,如果只有一根轴线,该属性无效

1
2
3
.box{
align-content:flex-start|flex-end|center|space-between|space-around|stretch;
}

如图所示:

该属性可以取六个值:

  • flex-start:与交叉轴起点对齐
  • flex-end:与交叉轴终点对齐
  • center:与交叉轴中点对齐
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
  • space-around:每根轴线两侧的间隔都相等,因此轴线之间的间隔比轴线与边框的间隔大一倍
  • stretch(默认):轴线占满整个交叉轴

四、项目属性

以下六个属性设置于项目

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order

order定义项目的排列顺序。数值越小,排列越靠前,默认为0

1
2
3
.item{
order:<interger>
}

如图所示:

4.2 flex-grow

flex-grow定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

1
2
3
.item{
flex-grow:<number>;//default=0
}

如图所示:

如果所有项目flex-grow属性都为1,则他们将等分剩余空间。如果一个项目的flex-grow为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink

flex-shrink定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

1
2
3
.item{
flex-shrink:<number>//default:1
}

如图所示:

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个为0,其他为1,则空间不足时,前者不缩小,负值对该属性无效。
**

4.4 flex-basis

flex-basis定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据该属性计算主轴剩余空间。默认值为auto即项目本来大小

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

它可以设为跟width或height属性一样的值,则该项目占据固定空间。

4.5 flex

flex是flex-grow,flex-shrink,flex-basis的简写,默认值为0 1 auto。后两者属性可选

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

该属性有两个快捷键:auto(1 1 auto)和none(0 0 auto)
建议优先使用该属性,而不是单独写三个分离属性,因为浏览器会推算相关值

4.6 align-self

align-self允许单个项目有于其他项目不一样的对齐方式,可覆盖align-items。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

1
2
3
.item{
align-self:auto|flex-start|flex-end|center|baseline|stretch;
}

如图所示:


除了auto其他于align-items一致。