文章目录
Flex布局
弹性布局(Flex布局)是CSS3提出的一个布局方式,和传统的布局方式不同,弹性布局不再指定一个元素具体的尺寸,而是描述这个元素应该如何填充空间。
Flex布局有两个比较重要的东西,一个是弹性容器,一个是弹性盒子。通过display: flex来指定一个盒子为弹性容器,该样式对容器本身没有影响,但是会影响内部元素的排布,里面的元素就变成了一个个弹性盒子。总得来讲,是弹性容器包含着一个个弹性盒子。
块级元素通过display: flex来指定为弹性容器,行内元素通过display: inline-flex来指定弹性容器。另外如果是Webkit内核的浏览器,需要加上-webkit前缀。
/*webkit内内核*/ .box{ display: -webkit-flex; /*Safari*/ display: flex; }
弹性布局具有以下特性:
- 弹性容器的默认宽度是100%,和块级元素一样;
- 横向布局的弹性盒子里的块级元素不再占用一整行,而是像float元素一样按一个方向排序;
- 弹性盒子可以延伸,也可以压缩,尺寸时可以随着容器大小而变化(弹性盒子设置的宽高不一定是真正展示的宽高);
- 多个弹性盒子的排布顺序、对齐方式都是可以设置的。
弹性容器属性设置
弹性容器除了设置display: flex属性外,还可以设置以下6个属性:
- flex-direction :用于设置主轴的方向(即内部弹性盒子的排列方向),默认值为row
- flex-wrap :默认情况下,盒子都排在一条线上,若一条线放不下,该属性就设置该怎么换行,默认值为nowrap(不换行)
- flex-flow : 是flex-direction和flex-wrap的简写,默认值为row nowrap
- justify-content : 设置了弹性盒子在主轴上的对齐方式,默认值为flex-start (左对齐)
- align-items : 设置盒子在交叉轴上的对齐方式,默认值为 stretch (盒子占据容器整个高度)
- align-content :设置多根轴线的对齐方式,若只有一根线,则没有作用,默认值为stretch
flex-direction属性
该属性用于设置主轴的方向(即内部弹性盒子的排列方向),默认值为row
属性有4个值:
- row(默认值):主轴为水平方向,从左向右依次排列;
- row-reverse:主轴为水平方向,从右向左依次排列;
- column:主轴为垂直方向,从上往下依次排列;
- column-reverse:主轴为垂直方向,从下往上依次排列
flex-wrap属性
默认情况下,弹性盒子都排在一条轴线上,,但是如果一条线上放不下,该属性就决定如何换行,该属性有3个值:
- nowrap(默认):不换行;
- wrap:换行,第一行在上方;
- wrap-reverse:换行,第一行在下方
flex-flow属性
该属性是flex-direction和flex-wrap的简写形式,其值是flex-direction和flex-wrap的叠加。默认值是row nowrap
属性值是: flex-flow : ||
justify-content属性
该属性定义了弹性盒子在主轴上的对齐方式,对齐方式还与主轴的方向有关(flex-direction),默认值是flex-start,
有5个属性值,假设flex-direction为默认值:
- flex-start:左对齐;
- flex-end:右对齐;
- center:居中;
- space-between:两端对齐,且每个弹性盒子之间间隔相等,容器边框与盒子之间没有间隔;
- space-around:每个盒子两侧的间隔相等。容器边框与盒子之间有间隔。
align-items属性
设置盒子在交叉轴上的对齐方式,默认值为 stretch(盒子占据容器整个高度)
该属性有5个值:
- flex-start:交叉轴的起点对齐;
- flex-end:交叉轴的终点对齐;
- center:交叉轴的中点对齐;
- baseline:盒子的第一行文字的基线对齐;
- stretch(默认值):若盒子未设置高度或设置为auto,则盒子将占满整个容器的高度
align-content属性
设置多根轴线的对齐方式,若只有一根线,则没有作用,默认值为stretch
该属性有6个值:
- flex-start:与交叉轴的起点对齐;
- flex-end:与交叉轴的终点对齐;
- center:与交叉轴的中点对齐;
- space-between:与交叉轴的两端对齐,轴线之间的间隔平均分布;
- space-around:两侧的间隔相等;
- stretch:轴线占满整个交叉轴
弹性盒子属性设置
弹性盒子是弹性容器中的一个个需要排列的元素,对盒子样式设置有6个属性:
- flex-grow:用来指定弹性盒子的拉伸方式,默认值为0;
- flex-shrink:用来指定弹性盒子的收缩方式,默认值是1;
- flex-basis:用来指定弹性盒子的基准宽度,盒子设置的宽度值不起效果
- flex:是对flex-grow、flex-shrink、flex-basis的叠加;
- order:用来指定盒子的排列顺序,数值越小,排列越靠前,默认值为0;
- align-self:用来指定单个盒子与其他盒子不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,若父元素没有align-items属性,则等同于继承stretch值。
flex-grow属性
该属性用于指定弹性盒子的拉伸方式。当一行内的弹性盒子不能充满整行时,用该属性去分配空闲的空间。默认值为0,即不去占用空闲区域。而当值为非0时,弹性盒子就会被拉伸。而拉伸盒子是按照flex-grow值的比例分配空闲区域的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex布局</title>
<style>
.flex-box{
display: flex;
}
.flex-box > .box{
width: 50px;
height: 100px;
}
.flex-box > .box1{
flex-grow: 1;
background: red;
}
.flex-box > .box2{
background: green;
}
.flex-box > .box3{
flex-grow: 2;
background: yellow;
}
</style>
</head>
<body>
<div class="flex-box">
<span class="box box1">1</span>
<span class="box box2">2</span>
<span class="box box3">3</span>
</div>
</body>
</html>
三个盒子的原始宽度是50px,但是屏幕宽为300px,因此还有150px的空闲区域,分别给box1、box3设置flex-grow的值为1,2,box2未设置值,因此150px的空闲区域会被box1和box3按flex-grow的值进行比例分配,因此box1的宽为100px,box2的宽为150px
flex-shrink属性
该属性用来指定弹性盒子的收缩方式,默认值为1.当所有盒子的宽度超过容器的宽度时,就需要收缩了。默认值为1的情况下指的是所有盒子会均分超出的宽度,所有盒子的宽度都会变小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex布局</title>
<style>
.flex-box{
display: flex;
}
.flex-box > .box{
width: 150px;
height: 100px;
}
.flex-box > .box1{
flex-shrink: 1;
background: red;
}
.flex-box > .box2{
flex-shrink: 0;
background: green;
}
.flex-box > .box3{
flex-shrink: 2;
background: yellow;
}
</style>
</head>
<body>
<div class="flex-box">
<span class="box box1">1</span>
<span class="box box2">2</span>
<span class="box box3">3</span>
</div>
</body>
</html>
当将三个盒子的宽度设置为150px时,总宽度就超过了容器的宽度,因此就需要收缩了。box1的flex-shrink设置为1,box2的flex-shrink设置为0,box3的flex-shrink设置为2,因此box2将不被收缩,而需要收缩的150px将从box1和box3中调整,根据1 : 2的比例,box1会消耗超出区域的1/3,也就是收缩50px,宽度变为100px;同理box3消耗超出部分的2/3,也就是收缩100px,宽度变为50px。
注意的问题是:若盒子中还包含一个固定宽度的元素,如box3中有一个60px的div,那box3的宽度就不会变成50px了,这时候弹性容器将会出现滚动条,box3将另起一行
flex-basis属性
用来指定弹性盒子基准宽度。弹性盒子设置的宽度(width)不一定起作用。同时flex-basis比width的优先级高,其值与width的值的定义方式一样,是一个长度单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex布局</title>
<style>
.flex-box{
display: flex;
}
.flex-box > .box1{
flex-basis: 80px;
background: red;
}
.flex-box > .box2{
flex-basis: 80px;
background: green;
}
.flex-box > .box3{
flex-basis: 120px;
background: yellow;
}
.flex-box > .box{
width: 50px;
height: 100px;
}
</style>
</head>
<body>
<div class="flex-box">
<span class="box box1">1</span>
<span class="box box2">2</span>
<span class="box box3">3</span>
</div>
</body>
</html>
width属性设置的宽度并未生效,而是采用flex-basis属性定义的宽度。
flex属性
flex属性是对前面三个属性的叠加,按照flex-grow、flex-shrink、flex-basis的顺序进行赋值的。
flex: <flex-grow> <flex-shrink> <flex-basis>
也可以进一步缩写,组合成一个值来使用。
- 默认情况下,即不指定flex的值时,默认值是“flex: 0 1 auto;”,这和分开写的默认情况一样;
- flex: none;:表示flex: 0 0 auto;,即盒子即不延伸也不收缩;
- flex: auto;:表示flex: 1 1 auto;,即盒子既能延伸也能收缩;
- flex: 1:当值为1时(或者其他非0值),表示flex: 1 1 0,即容器内的盒子会平分空间,不管是延伸还是收缩。
order属性
order属性定义了盒子的排列顺序,数值越小,排列越靠前,默认值为0,也可以为负数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex布局</title>
<style>
.flex-box{
display: flex;
height: 50px;
}
.flex-box > .box1{
flex-basis: 80px;
background: red;
order: 1
}
.flex-box > .box2{
flex-basis: 80px;
background: green;
order: 2
}
.flex-box > .box3{
flex-basis: 120px;
background: yellow;
order: 0
}
</style>
</head>
<body>
<div class="flex-box">
<span class="box box1">1</span>
<span class="box box2">2</span>
<span class="box box3">3</span>
</div>
</body>
</html>
也就是改变了盒子的排列顺序
align-self属性
该属性用来指定单个盒子与其他盒子不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,若父元素没有align-items属性,则等同于继承stretch值。
该属性可以取6个值:
auto | flex-start | flex-end | center | baseline | stretch
除了auto外,其值的含义与align-items属性完全一致,相当于是盒子的align-items属性
参考链接: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
常见flex布局方式: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html