flex布局-三亩地-编程学习日记

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>

日记详情