css之flex布局
实现flex布局
第一个步启动
display:flex;
display:-webkit-flex;
告诉浏览器说我们要启动弹性浮动
flex-direction 设置方向
素材代码
<!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 {
flex-direction: row;
display:flex;
}
.item {
width: 100px;
height: 100px;
background: #ff2222;
margin-right: 10px;
margin-bottom: 10px
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
-
flex-direction: row; 水平方向，左到右，默认布局
image.png
-
flex-direction: row-reverse 反转过来。右到左
image.png
-
flex-direction:column 上到下
image.png
-
flex-direction:columnimage.png 下到上
image.png
flex-wrap 属性
设置是否允许项目多行排列，以及多行排列时换行的方向。
flex-wrap: nowrap（默认值） | wrap | wrap-reverse
nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
wrap：容器单行容不下所有项目时，换行排列。
wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。
将上面的素材代码增加个宽度限制，刚才每个项目都是100px,现在给容器给到330，只能够容纳3个，并且我们增加项目到5个
<!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 {
flex-direction: row;
display:flex;
width: 330px;
border: 1px solid #000;
flex-wrap: nowrap
}
.item {
width: 100px;
height: 100px;
background: #ff2222;
margin-right: 10px;
margin-bottom: 10px
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
- nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
image.png
wrap：容器单行容不下所有项目时，换行排列。
image.png
wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向
image.png
justify-content 属性
设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间。
flex-start（默认值）：项目对齐主轴起点，项目间不留空隙。
素材代码进行改造
<!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 {
flex-direction: row;
display:flex;
border: 1px solid #000;
flex-wrap: nowrap;
justify-content:flex-start;
}
.item {
width: 100px;
height: 100px;
background: #ff2222;
border: 1px solid #f60;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
-
center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点距离等于最后一个项目离主轴终点距离。
image.png
-
justify-content: flex-end;项目对齐主轴终点，项目间不留空隙。
image.png
-
space-between：项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0。
image.png
-
space-around：与space-between相似。不同点为，第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半。
image.png
-
space-evenly：项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。
image.png
align-items 属性
设置项目在行中的对齐方式。
素材代码改造
<!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 {
flex-direction: row;
display:flex;
width: 100px;
border: 1px solid #000;
flex-wrap: nowrap;
justify-content:flex-start;
height: 500px;
align-items:stretch;
}
.item {
/* width: 100px;
height: 100px; */
background: #ff2222;
border: 1px solid #f60;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
stretch（默认值）：项目拉伸至填满行高。
image.png
flex-start：项目顶部与行起点对齐。
image.png
center：项目在行中居中对齐。
image.png
flex-end：项目底部与行终点对齐。
image.png
baseline：项目的第一行文字的基线对齐。。
image.png
align-content 属性
多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多余的空间。
素材代码改造
<!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 {
flex-direction: row;
display:flex;
width: 100px;
border: 1px solid #000;
flex-wrap: nowrap;
height: 500px;
align-content: stretch;
flex-wrap: wrap;
}
.item {
width: 50px;
height: 50px;
background: #ff2222;
border: 1px solid #f60;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">Green div with more content</div>
</div>
</body>
</html>
stretch（默认值）：当未设置项目尺寸，将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴。
image.png
flex-start：首行在交叉轴起点开始排列，行间不留间距。
image.png
center：行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等。
image.png
flex-end：尾行在交叉轴终点开始排列，行间不留间距。
image.png
space-between：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0。
image.png
space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。
image.png
space-evenly：行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。
image.png
设置项目沿主轴方向上的排order 属性
image.png
列顺序，数值越小，排列越靠前。属性值为整数。
flex-shrink 属性
当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。
说白点就是重新计算尺寸，根据给的比例
比如容器宽度
.warp{
width:400px
}
.item1
{
width:150
}
.item2
{
width:200
}
.item3
{
width:100
}
item1+item2+item3=450;就会出现多出了50，那么我们设置下比例分配
.item1
{
width:150; flex-shrink: 3;
}
.item2
{
width:200; flex-shrink: 2;
}
.item3
{
width:100; flex-shrink: 1;
}
最后计算公式，跳转后的尺寸
余出值y1=400-150+200+100=-50;
150*3+200*2+100*1=450+400+100=900;
最后计算
项目值=原来值大小 - 余出值y1*原来值大小*比例 / 比例数的和
item1=150 - 50 * 150 * 3 / 900≈ 125px
item2=200 - 50 * 200* 2 / 900≈ 177px
item3=100 - 50 * 100 *1 / 900≈ 94px
flex-grow 属性
当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。
.container{
display: flex;
width: 400px; // 容器宽度为400px
}
.item1{
width: 80px;
flex-grow: 3;
}
.item2{
width: 120px;
flex-grow: 1;
}
.item3{// 项目3未设置flex-grow，默认flex-grow值为0
width: 140px;
}
在这个例子中，容器的剩余空间为 400 - (80 + 120 + 140) = 60px。剩余空间按 60 / (3 + 1 + 0) = 15px进行分配：
item1的最终宽度为：80+ (15 * 3) = 125px
item2的最终宽度为：120 + (15 * 1) = 135px
item3的最终宽度为：140 + (15 * 0) =140px
flex-basis 属性
当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替项目的width属性。
当容器设置flex-direction为column或column-reverse时，flex-basis和height同时存在，flex-basis优先级高于height，也就是此时flex-basis代替项目的height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。
