Flex布局:
一个样例引入flex布局(水平垂直居中)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content{
height: 200px;
width: 200px;
background-color: #eee;
display:flex;
}
.item{
width: 50px;
height: 50px;
background-color: white;
margin:auto;
}
</style>
</head>
<body>
<div class="content">
<class class="item">
item
</class>
</div>
</body>
</html>
尽管页面怎么拉也不会变。
对子元素直接的影响
- 修改了display:flex;
会将直接的子元素的 display改成block。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: flex;
}
</style>
</head>
<body>
<div>
<a href="#">a</a>
<span>span</span>
<p>p</p>
<input type="text">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</div>
</body>
</html>
- 父级加了 display:flex;后会消除margin塌陷的问题
- 清除对浮动的影响,例子:
平时会出现这样的效果:
一个在浏览器的最左边,另一个在浏览器的最右边。
当我们给它的父级加上display:flex时,会有如下的效果(清除了浮动):
容器和项目
container容器:如果你给一个元素添加了display:flex;,称为这是一个容器。
item项目:容器里卖弄的直接子元素,称为项目。
主轴和交叉轴
主轴:在容器当中,项目(多个)按一定的方向进行排列的。默认时按从左向右的方向进行排列。这里排列的方向就是主轴的方向吗,在容器内部,主轴方向与容器交际的部分为主轴。
交叉轴: 与主轴垂直的那个轴。默认是从三个向下的方向。
容器的属性值
-
flex-direction
- row:是默认值,从左往右排
- column:从上往下
- row-reverse:从右往左
- column-reverse:从上往下排列
- row:是默认值,从左往右排
-
flex-wrap 换行
我们来写这样一个例子:
container的子元素已经一共有6个而且每个的宽度都为200px;,而container本身只有400px,子元素的宽度明显已经超出了父级的宽度,但是我们来看一下效果:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container{ display: flex; width: 500px; height: 400px; background-color: #ccc; flex-direction: row;/*row默认值从左往右,column从上往下,row-reverse从最右边往最左边排。*/ } .item{ height: 30px; width: 200px; background-color:#fff; border: 1px solid red; /* margin: 30px; */ } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">3</div> <div class="item">3</div> <div class="item">3</div> </div> </body> </html>
(主轴方向为水平方向):- flex-wrap:nowrap; 默认值
flex-wrap默认值是不换行,会压缩每一个项目的宽度。 - flex-wrap:wrap; 允许换行,在主轴的方向上换行。
默认的方向是水平从左向右,换行从上向下
- flex-wrap:wrap-reverse; 从上往下换行。
(主轴方向为竖直方向): - flex-wrap:wrap;
由于项目的子元素的高没有超过容器的高,所以不换行。
现在我们把项目的高度改一下
换行及换行的方向是和主轴方向相关的。必须要先知道主轴的方向是什么方向。
- flex-wrap:nowrap; 默认值
-
flex-flow: 简化代码,是flex-direction与flex-wrap的合写
- flew-flow:flex-directions flex-wrap;
-
justify-content:容器内的项目再按主轴方向上进行排列,这个属性决定了项目与项目之间的位置关系。在主轴方向上有富余的空间(项目的宽度之和下雨容器的宽度),如何去处理富余的空间;
我们来看看他都有那些值及对应的效果:
- justify-content:flex-start;
- justify-content:flex-end;
- justify-content:center;
- justify-content:space-around; /容器很大,项目不足以填充整个容器,所以会有一部分的空白空间/
/环绕。让项目之间的有相等空间进行环绕/
- justify-content:space-between; /项目与项目之间的空间是相等的。类似于“两端对齐的效果”/
(注意主轴方向)
- justify-content:flex-start;
-
align-items : 和(justify-content)差不多项目在交叉轴方向上的摆放位置
取值:strech(默认值) | flext-start | flex-end | center | baseline -
align-content :
当容器中有多行项目(当然,前提是允许换行)时,每一行项目就会产生一根主轴,多行项目就会产生多个主轴。这个属性决定着多跟主轴之间的位置关系。
项目的属性值
-
order
取值:数值;
功能:容器中有多个项目,项目的默认摆放时沿主轴方向,按文档中dom元素的书写顺序进行排列的。order属性用于更改排列顺序。数值越小,越靠前,默认值为0,可以为负数。 -
flex-grow
取值:数值
功能:放大因子。使用前提:主轴方向上有多余的空间可以让项目去”伸展“。
计算:- 统计多余的空间:M = 容器的宽度-所有项目宽度之和
- 确定均分的份数:N = 项目flex-grow的值之和
- 计算单位空间 P = M/N
- 项目放大后的宽度:R = 宽度 + p * 当前flex-grow值
有两个item,第一个设置了flex-grow为1,第二个使用默认值:flex-grow。结果是:如果主轴上有多余的空间,则第一个项目会填充这个空间,而第二个项目又没变化。
结果如下:
对于这个我们来计算一下他的放大后的宽度。 M=500-100-200=200, N=1+0=1, p=200/1=200px, item1=100+2001=300px, item2=200+2000=200px
结论:如果一个项目的flex-grow为0,则它的宽度不会放大
-------- 如果flex-grow越大,说明它在放大后,会得到更多的空间。
-------- 如果flex-grow越小,说明它在放大后,会得到更小的空间。
特别地:如果所有的项目有一样的flex-grow值,它们会等分多余的空间。就是说,放大后的大小 = 自己的大小 + 平均分配的值。 -
flex-shrink
取值:数值
功能:缩小因子。使用前提:主轴方向上的空间不够,项目被压缩。默认值为1(当容器主轴方向不能容下全部的项目,并且也不哟允许换行,由于flex-shrink 为1,所有的项目都会被压缩。各自被压缩数值是不一样的,如下公式:)
(1)总差值,即需要被压缩的大小:M=容器的宽度-项目的宽度之和
(2)加权和:N =flex-shrink*项目宽度值之和
(3)缩小后的宽度 = 项目值 - 项目值 * flex-shrink /N * M。
结论:
1.项目默认会被缩小(空间不够).flex-shrink:1
2.Flex-shrink越大,被压缩越多。
3.Flex-shrink越小,被压缩越少。如果flex-shrink=0,不会被压缩。 -
flex-basis
项目再主轴上占据的大小。默认为auto(主轴是水平方向时就是宽度,主轴时垂直方向时:默认为height值。)
-
flex
flex属性是flex-grow,flex-shrink 和 flex-basis的间歇,默认值为 0 1 auto。后两个属性可选。该属性有两个快捷值:auto(1 1 auto) 和 none(0 0 auto)。
-
align-self
取值:auto | flex-start | flex-end | center | baseline | strech
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖容器的align-items属性。