flex布局
flex简介
任何一个容器指定为flex布局
实现条件：至少有后代关系的
弹性布局
特点：2根主轴线
-
主轴，默认从左到右(水平)
-
交叉轴：默认从上到下(垂直)
父元素(开启弹性布局)，子元素就是在里面灵活的布局
父元素常用的属性
display
display有很多的值，设置flex布局
none,隐藏属性
block 设置为块元素
inline 设置行内元素
flex布局
justify-content(主轴设置)
justify-content:
flex-start 默认靠左
flex-end 靠右
center 水平居中 ✅最常用
space-between 两端对齐，中间自动均分
space-around 每个项目左右有间距
space-evenly 所有间距完全相等 ✅最好用
水平居中案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
/* 开启flex布局 */
display: flex;
/* x轴居中 */
justify-content: center;
}
.box2 {
/* width: 200px; */
height: 100px;
border: solid green 3px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">我是第一个div</div>
<div class="box2">我是第二个div</div>
<div class="box2">我是第三个div</div>
<div class="box2">我是第四个div</div>
</div>
</body>
</html>
效果图
align-items(y轴设置的)
align-items:
flex-start 顶部
flex-end 底部
center 垂直居中 ✅最常用
stretch 拉伸铺满（默认）
垂直居中，需要设置高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100%;
height: 600px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.box2 {
/* width: 200px; */
height: 100px;
border: solid green 3px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">我是第一个div</div>
<div class="box2">我是第二个div</div>
<div class="box2">我是第三个div</div>
<div class="box2">我是第四个div</div>
</div>
</body>
</html>
子元素常用属性
flex属性
flex: 1 占满剩余空间，多个子元素写这个的，自动均分宽度
因此的话就不需要设置这个宽度了，根据浏览器的大小自动的调节宽度这些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
/* 父元素开启了flex布局 */
display: flex;
}
.box2 {
/* 可以注释这个宽度，因为后面开启了flex 1 */
/* width: 200px; */
height: 100px;
border: solid green 3px;
/* flex 1 每个占一份，自动占满，因此的话，不需要这个宽度的设置了，会随着页面的大和小自动的调节 */
flex: 1;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box2"></div>
</div>
</body>
</html>
问题
为什么2个div 一个在上，一个在下呢？
2个a，却都是在一行的
这个就是块元素和行内元素
块元素：就是占一行，这个宽度都是被占用的
行内元素：就是都在一行上面
display其他选项：
none 隐藏元素，不占空间
block 设置为块级元素，独占一行，可设置宽高
inline 设置为行内元素，同行显示，不可设置宽高
none，隐藏元素，不会占用空间，比如，div，不会独占一行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 100px;
background-color: green;
/* div取消块元素 */
display: none;
}
.box2 {
width: 200px;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果图就是：第二个div会把第一个div覆盖掉
将div设置为行内元素
设置为inline
设置为inline后，div可以和其他的元素显示在一行上，不好的地方就是宽度和高度设置无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: green;
display: none;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
display: inline;
}
</style>
</head>
<body>
<div class="box1">第一个div</div>
<div class="box2">第二个div</div>
<a href="">点击我跳转百度</a>
</body>
</html>
将a设置为块级元素
就是可以设置宽高，但是会独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: green;
display: none;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
display: inline;
}
a {
display: block;
width: 100px;
height: 100px;
line-height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="box1">第一个div</div>
<div class="box2">第二个div</div>
<a href="">点击我跳百度</a>
</body>
</html>
div不设置宽度
就是独占一行的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 没有设置这个宽度 */
background-color: black;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
浙公网安备 33010602011771号