Flex弹性布局是W3C在2009年提出的新的布局方式,内含的大量的属性,使其可以方便,有效,高适配,响应式的进行页面布局。是目前前端开发的一种重要的布局。
一、简介
Flex布局是对容器设置的一种布局方式。通过对容器进行display: flex;实现修改容器为Flex弹性布局。再通过一系列属性设置,达到对容器内的元素进行控制。
二、容器(父元素)的属性
- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-flow
- align-content
1. flex-direction
Flex布局中存在主轴和副轴的概念,flex-direction就是设置主轴方向的属性。设置完主轴方向,另一个方向即为副轴。有以下4个值
flex-direction: row | row-reverse | column | column-reverse;
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
2. justify-content
justify-content是设置元素在主轴方向上的位置。有以下5个值
(例子采用默认主轴方向是水平,左到右)
justify-content: flex-start | flex-end | center | space-between | space-around;
- flex-start(默认)主轴方向首对齐
- flex-end 主轴方向尾对齐
- center 主轴方向居中对齐
- space-between 主轴方向第一个和最后一个元素贴边,其他元素平分剩下的空间
- space-around 主轴方向所有元素平分所有空间
3. align-items
align-items是设置元素在副轴方向上的位置。有以下5个值
(例子采用默认副轴方向上到下)
align-items: flex-start | flex-end | center | stretch | baseline;
- flex-start 副轴方向首对齐
- flex-end 副轴方向尾对齐
- center 副轴方向居中对齐
- stretch (默认值)如果子元素未设置高度或设为auto,将占满整个容器的高度
- baseline 子元素的第一行文字的基线对齐
4. flex-wrap
flex-wrap是设置换行的属性,有以下3个值(例子的父元素高宽都为40px,子元素高20px,宽10px)
flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap (默认)不换行,超出父元素大小子元素会压缩
- wrap 换行,第一行在上
- wrap-reverse 换行,第一行在下
5. flex-flow
flex-flow是flex-direction和flex-wrap的简写形式,默认值为row nowrap
flex-flow: flex-direction flex-wrap;
6. align-content
align-content定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用,有以下6个值
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- flex-start 副轴方向首对齐
- flex-end 副轴方向尾对齐
- center 副轴方向居中对齐
- space-between 第一个主轴和最后一个主轴贴边,其他主轴平分剩余空间
- space-around 所有主轴平分所有空间
- stretch (默认)若子元素没有设置高度,则铺满父元素高度
三、子元素属性
由于对父元素设置的属性是对于所有子元素来说的,要是单独的对其中的某个子元素进行操作,还需要对子元素设置对应的属性,子元素的属性有以下6种
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1. order
order属性可以在不破坏html文档的结构前提下改变子元素的顺序。order:数字;的方式使用,数字越小越靠前,默认都为0。
.father {
height: 40px;
width: 40px;
border: 1px solid #ccc;
margin: 100px auto;
display: flex;
}
.son {
height: 10px;
width: 10px;
}
.son:nth-child(1) {
background-color: pink;
}
.son:nth-child(2) {
background-color: purple;
}
.son:nth-child(3) {
background-color: skyblue;
}
使紫色盒子到最前边,只需给紫色盒子设置order:-1;
.son:nth-child(2) {
background-color: purple;
order: -1;
}
2. flex-grow
flex-grow可以设置子元素的放大比例,默认为0,即有剩余空间也不放大。
.father {
height: 40px;
width: 40px;
border: 1px solid #ccc;
margin: 100px auto;
display: flex;
}
.son {
height: 10px;
width: 10px;
}
.son:nth-child(1) {
background-color: pink;
}
.son:nth-child(2) {
background-color: purple;
}
.son:nth-child(3) {
background-color: skyblue;
}
若将右边的剩余空间都分配给粉色子元素,只需给粉色子元素设置flex-grow:1;
.son:nth-child(1) {
background-color: pink;
flex-grow: 1;
}
若将右边的剩余空间都分配给粉色子元素1份和蓝色子元素2份
.son:nth-child(1) {
background-color: pink;
flex-grow: 1;
}
.son:nth-child(2) {
background-color: purple;
}
.son:nth-child(3) {
background-color: skyblue;
flex-grow: 2;
}
3. flex-shrink
flex-shrink属性是设置子元素的缩小比例,默认为1。
.father {
height: 40px;
width: 40px;
border: 1px solid #ccc;
margin: 100px auto;
display: flex;
}
.son {
height: 10px;
width: 10px;
}
.son:nth-child(1) {
background-color: pink;
}
.son:nth-child(2) {
background-color: purple;
}
.son:nth-child(3) {
background-color: skyblue;
}
若元素太多超出父元素的大小,则所有元素等比例缩小
若不想让第一个粉色缩小,只需给第一个粉色设置flex-shrink: 0;剩余的其他子元素还是等比例缩放
.son:nth-child(1) {
flex-shrink: 0;
}
4. flex-basis
flex-basis属性是设置在分配多余空间之前,子元素提前占据的主轴空间大小。默认值为auto,即子元素本身的大小,也可以手动设置数值(多少px),这个属性一般很少用到,了解就可以。
5. flex
flex属性flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可以不写。
** 6. align-self**
align-self属性设置子元素在副轴方向上的位置,有以下6个值,默认是auto,但是用的最多的就是center。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
.father {
height: 40px;
width: 40px;
border: 1px solid #ccc;
margin: 100px auto;
display: flex;
}
.son {
height: 10px;
width: 10px;
}
.son:nth-child(1) {
background-color: pink;
}
.son:nth-child(2) {
background-color: purple;
}
.son:nth-child(3) {
background-color: skyblue;
}
若让紫色盒子自己在副轴方向上居中,只需
.son:nth-child(2) {
background-color: purple;
align-self: center;
}
以上就是Flex弹性布局的属性的作用,作为页面布局的重要方式之一,他的响应性和适配性是很重要的因素,也是我们必须掌握的一种布局方式。