1、display:flex; 伸缩盒布局:容器、元素
弹性伸缩比例、自动留白间隙、手机端
1、flex容器(父元素):display:flex(默认x为主轴)
排列方式(flex-direction: row (列布局) //x轴:主轴 y:交叉轴)
(flex-direction: column (行布局 //y轴:主轴 x:交叉轴)
换行: flex-wrap: nowrap; (默认不换行)
flex-wrap: wrap; (自动换行)
flex容器的属性:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<link rel="stylesheet" href="flex.css">
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>
css代码:没有设置display: flex;时
/*无布局*/
.parent{
height: 300px;
border: 2px solid red;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
图:
.parent{
height: 300px;
border: 2px solid red;
/*布局设置*/
display: flex;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
默认主轴X轴的对齐方式如下:
.parent{
height: 300px;
border: 2px solid red;
/*布局设置*/
display: flex;
/*左对齐*/
justify-content: flex-start;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
.parent{
height: 300px;
border: 2px solid red;
/*布局设置*/
display: flex;
/*右对齐*/
justify-content: flex-end;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
.parent{
height: 300px;
border: 2px solid red;
/*布局设置*/
display: flex;
/*居中对齐*/
justify-content: center;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
.parent{
height: 600px;
border: 2px solid red;
display: flex;
/*两端对齐,项目之间的间隔都相等*/
justify-content: space-between;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
.parent{
height: 600px;
border: 2px solid red;
display: flex;
/*每个项目两侧的间隔相等,项目中间的间距 = 2 * 左右边缘的间距*/
justify-content: space-around;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
默认交叉轴y轴的对齐方式如下:
.parent{
height: 600px;
border: 2px solid red;
display: flex;
/*交叉轴下对齐*/
align-items: flex-end;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
.parent{
height: 300px;
border: 2px solid red;
/*布局设置*/
display: flex;
/*交叉轴y上对齐*/
align-items: flex-start;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
.parent{
height: 600px;
border: 2px solid red;
display: flex;
/*交叉轴居中对齐*/
align-items: center;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
.parent{
height: 600px;
border: 2px solid red;
display: flex;
/*与第一行文字的基线对齐*/
align-items: baseline;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
}
.child:nth-child(1){
padding-top: 30px;
}
flex元素的属性:
flex-grow:默认为0,即如果存在剩余空间,也不放大。
.parent{
height: 600px;
border: 2px solid red;
display: flex;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
flex-grow: 1;
}
.parent{
height: 600px;
border: 2px solid red;
display: flex;
}
.child{
height: 200px;
width: 200px;
background-color: salmon;
flex-grow: 1;
}
.child:nth-child(1){
flex-grow: 2;
/*1占二份*/
}
flex-shrink的参数指定弹性收缩,默认为1,即如果空间不足,该项目将缩小
flex-shrink:0; 不缩小
flex-basis 属性级别高于width
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性
总结:结合项目进行应用才能有更好的掌握和熟悉,初学多练才更有成效。