Flex布局
第一讲 声明一个弹性盒子
1、 弹性盒子的构建(在弹性盒子里面的元素可认为是弹性元素)
Display:flex(块级元素)
Display:inline-flex(行内块级元素)
块级元素和行内块级元素的概念
第二讲 规则一,改变盒子里面的方向
1、 弹性元素排列方式声明
Flex-direction:row 行排列
Column 纵排列
Column-reverse 翻转纵排列
Row-reverse 翻转行排列
2、 弹性元素折行(flex-wrap,当弹性元素溢出一行的处理)
Flex-wrap 默认 元素等比例缩放适应
Flex-wrap:wrap 元素折行
Felx-wrap:wrap-reverse 翻转折行
3、 综合1、2两种方式
Flex-flow:row wrap
第三讲 轴
1、 轴的概念
主轴:水平方向排列的的主轴就是水平方向上
副轴:因为溢出而挤下去的元素是按副轴挤压
2、控制主轴的对齐方式Justify-content 整理内容方式
space-evenly 主轴平均空间
flex-start 主轴开始
flex-end 主轴结束
center 主轴居中
space-evenly 平均分配
space-between 介于两者之间
space-around 环绕
3、副轴的对齐方式
Align-items
Flex-start 副轴开始
Flex-end 副轴结束
Center 副轴中心
Stretch 拉伸
4、 多行元素的副轴对齐方式
Align-content
Space-between
Space-around
Space-around
5、 单个元素在副轴的对齐方式
Align-self
Flex-start
Center
Flex-end
6、 单个元素可用空间分配
当盒子的宽度大于里面全部元素宽度之和时
Flex-grow:x(数字)(用于设置单个元素)
可以设置单个元素可以所扩展的宽度
扩展的宽度是盒子空余的宽度乘以总等分分之x
7、 实验一:简单flex布局
<!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>
*{
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
header{
height: 60px;
background: blueviolet;
}
main{
flex-grow: 1;
height: 100px;
background: #cccccc;
}
footer{
height: 60px;
background: #383881;
}
</style>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
8、 当空间不够时设置元素的缩小比例
Flex-shrink:x
X为整数,x越大越小
9、 主轴的基准尺寸定义
优先级:
Max-height 大于 flex-basis 大于 width
10、元素放大缩小的统一表示
Flex:x1 x2 x3
X1:flex-grow
X2:flex-shrink
X3:flex-flex-basic
11、 案例 设置简单布局应用
Order改变排列顺序
<!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>
*{
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
height: 100vh;
}
article{
margin: 0 auto;
border: solid 5px silver;
height: 500px;
width: 400px;
padding: 10px;
display: flex;
flex-direction: column;
}
article section{
flex: 1 0 100px;
background: blueviolet;
background-clip: content-box;
padding: 5px;
text-align: center;
display: flex;
flex-direction: column;
color: #fff;
}
article section div{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
font-size:22px;
}
article section span{
padding:10px;
background: #333;
}
</style>
</head>
<body>
<article>
<section>
<div>tengxun</div>
<span onclick="up(this)">up</span>
</section>
<section>
<div>ali</div>
<span onclick="up(this)">up</span>
</section>
<section>
<div>baidu</div>
<span onclick="up(this)">up</span>
</section>
</article>
<script>
function up(el){
console.log("hahah");
let order = getComputedStyle(el.parentElement,null).order;
el.parentElement.style.order = order*1-1
}
</script>
</body>
</html>
12、 弹性布局也可以操作文本节点
Justify-content
Align-items
都可以对文本进行操作
13、 空间位置在弹性布局中的体现
绝对定位与flex布局冲突,原有位置消失,影响后面的元素布局
相对定位与flex布局不冲突,原有位置保留,不影响后面的元素布局,