以前的传统布局,依赖盒装模型。即 display + position + float 属性。但是对于比较特殊的布局就不太容易实现,例如:垂直居中。下面主要介绍flex的基本语法。
一、什么是Flex布局?
Flex布局个人理解为弹性盒子,为盒装模型带来了很大的灵活性,方便开发人员。
Flex布局基本使用如下:
.container{ display:flex; }
行内元素的使用:
.container{ display:inline-flex; }
针对WebKit内核的浏览器(Chrome就是该内核的浏览器之一),要加上-webkit的前缀
.container{ display:flex; display:-webkit-flex; }
二、Flex布局的基本概念
如图。最外层的元素称为flex容器。所有子元素为容器成员,称为flex item。简称 “项目”。
容器内有两条轴,主轴和交叉轴。项目默认沿着主轴排列。占据的主轴空间叫main size,占据的交叉轴空间 cross size
三、Flex布局之容器属性
flex-direction flex-wrap flex-flow justify-content align-items align-content
3.1 flex-direction
决定主轴的方向。即项目的排列方向。
.container{ flex-direction:row | row-reverse | column | column-reverse }
- row(默认值):主轴为水平方向,起点在左
- row-reverse:主轴为水平方向,起点在右
- column:主轴为垂直方向,起点在上
- column-reverse:主轴为垂直方向,起点在下
3.2 flex-wrap
默认项目在一条线。flex-wrap属性定义轴线排不下,怎么换行
.container{ flex-wrap:nowrap | wrap | wrap-reverse }
- nowrap(默认值):不换行
- wrap:换行,第一行在上
- wrap-reverse:换行,第一行在下
3.3 flex-flow
是flex-direction和flex-wrap的简写形式。默认值为 row nowrap
.container{ flex-flow:flex-direction || flex-wrap }
3.4 justify-content
定义了主轴的对齐方式
.container{ justify-content:flex-start | flex-end | center | space-between | space-around }
- flex-start(默认值):左对齐
- flex-end:右对齐
- center:居中对齐
- space-between:两端对齐
- space-around:项目两侧距离相等
3.5 align-items
定义了交叉轴的对齐方式
.container{ align-items:flex-start | flex-end | center | baseline | stretch }
- flex-start:交叉轴起点对齐
- flex-end:交叉轴终点对齐
- center:交叉轴终点对齐
- baseline:项目第一行文字对齐
- stretch(默认值):项目如果未设置高度或者auto,将占满整个容器的高度
四、Flex布局之项目属性
order flex-grow flex-shrink flex-basis flex align-self
4.1 order
排列顺序。值越小,越在项目前面
.item{ order:1 | 2 | ....; }
4.2 flex-grow
定义了项目的放大比例,默认为0。即如果存在剩余空间,也不放大
.item{ flex-grow:1 | 2 | ....; }
如果所有子元素都是1,那么会等分剩余项目空间,如果其中一个是2,那么它所占的剩余空间比其他元素多一倍
4.3 flex-shrink
定义了项目的缩小比例,默认为1。即如果空间不足,该项目将缩小
.item{ flex-shrink:1 | 2 | ....; }
如果所有子元素都是1,那么空间不足时,都会缩小。如果其中一个为0,其他元素为1,空间不足时,前者不缩小
4.4 flex-basis
定义了分配多余空间之前,项目占据的主轴空间。默认值为auto,即项目的实际大小
.item{ flex-basis: length | auto; }
4.5 flex
是flex-grow、flex-shrink、flex-basis的简写。默认 0 1 auto。
.item{ flex: flex-grow | flex-shrink | flex-basis }
有两个常用快捷值:auto( 1 1 auto)、none( 0 0 auto)
4.6 align-self
单个子元素可以和其他子元素有不同的排列方式,比align-items优先级高。默认值auto
.item{ align-self: auto | flex-start | flex-end | center | baseline | stretch }