flex简介
任何一个容器指定为flex布局
实现条件：至少有后代关系的
弹性布局
特点：2根主轴线
-
主轴，默认从左到右(水平)
-
交叉轴：默认从上到下(垂直)
父元素(开启弹性布局)，子元素就是在里面灵活的布局
父元素常用的属性
display
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>
