1.理解容器和项目(container&item)
将元素变为容器
块级:display:flex
行内: display:inline-flex
2.容器的属性
1.flex-direction(主轴方向)
row 主轴x,起点在左
row-reverse 主轴x,起点在右
column 主轴y,起点在上
column-reverse 主轴y,起点在下
2.flex-wrap
当主轴排列不下所有项目时,指定项目换行
取值:1.nowrap 默认值,空间不够也不换行,项目会缩小
2.wrap 换行
3.wrap-reverse 换行反转
3.flex-flow
flex-direction和flex-wrap的缩写
取值:1.row nowrap
2 ....
4.justify-content
定义项目在主轴上的对齐方式
取值:flex-start
在主轴起点对齐
flex-end
在终点对齐
space-between
两端对齐
center
在主轴上居中对齐
space-around
每个项目间距相同
5.align-items(代表所有项目,与align-self不同)
定义项目在交叉轴上的对齐方式
flex-start
flex-end
center
baseline:交叉轴基线对齐
stretch:如果项目未设置尺寸,在交叉轴上将占满所有空间
3.项目的属性
该组的属性只能设置在某一个项目元素上,只能控制一个项目,不影响容器和其他项目效果
1.order
定义项目的破爱列顺序,值越小越靠近起点
默认值 0
取值:整数数字无单位
2.flex-grow
定义项目的放大比例,如果项目有足够的剩余空间,项目将扩大
取值:整数数字,无单位
默认为0,取值越大,占据的剩余空间越多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
border: 1px solid #00b3ee;
display: flex;
}
#container div{
width: 100px;
height: 100px;
}
.d1{
background-color: yellow;
flex-grow: 1;
}
.d2{
background-color: #1b6d85;
flex-grow: 2;
}
.d3{
background-color: #2b542c;
flex-grow: 3;
}
</style>
</head>
<body>
<div id="container">
<div class="d1">item1</div>
<div class="d2">item2</div>
<div class="d3">item3</div>
</div>
</body>
</html>
按比例分摊剩余空间
3.flex-shrink
定义项目的缩小比例,即容器空间不足时,项目该如何缩小
取值:默认为1,空间不足时则等比缩小,
取值为0则不缩小(常用)
4.align-self(定义单个项目)
定义当前项目在交叉轴上的对齐方式
取值:
flex-start
flex-end
center
baseline
stretch 伸展对齐
auto(继承自父元素的align-items属性)
ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
display: flex;
width:960px;
height: 620px;
flex-wrap: wrap;
margin: 0 auto;
justify-content: space-between;
}
#container>div{
background-color: #5e5e5e;
}
#container #d1{
width:610px;
height: 370px;
}
#container #d2{
width: 340px;
height: 370px;
}
#container #d3{
width: 360px;
height: 230px;
}
#container #d4{
width: 190px;
height: 230px;
}
#container #d5{
width: 190px;
height: 230px;
}
#container #d6{
width: 190px;
height: 230px;
}
</style>
</head>
<body>
<div id="container">
<div id="d1">item1</div>
<div id="d2">item2</div>
<div id="d3">item3</div>
<div id="d4">item4</div>
<div id="d5">item5</div>
<div id="d6">item6</div>
</div>
</body>
</html>