👉⭐️布局相关技术💎
🍊Flex Box是什么
一种新的排版上下文 它可以控制子级盒子的 摆放的流向 摆放顺序 盒子宽度和高度 水平和垂直
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style>
.container{
display: flex;
border: 2px solid #966;
}
.a,.b,.c{
text-align: center;
padding: 1em;
}
.a{
background-color: #fcc;
}
.b{
background-color: aquamarine;
}
.c{
background-color: purple;
}
</style>
</head>
<body>
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
</body>
</html>
🍊布局原理:
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
🍎常见父项属性:
- flex-diretion:设置主轴的方向
- justify-content:设置主轴上的子元素排列方式
- flex-wrap:设置子元素是否换行
- align-content:设置侧轴上的子元素的排列方式（多行）
- align-items:设置侧轴上的子元素排列方式（单行）
- flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
🍎 flex布局子项常见属性
- flex属性：定义子项目分配剩余空间，用flex来表示占多少份
<!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>Document</title>
<style>
p{
display: flex;
width:80% ;
height: 150px;
background-color: rgb(119, 190, 119);
margin: 0 auto;
}
p span{
flex: 1;
}
p span:nth-child(2){
flex: 2;
background-color: antiquewhite;
}
</style>
</head>
<body>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>
- align-self属性:控制子项自己在侧轴上的排列方式
- oder属性:定义项目的排列顺序
数值越小越靠前，默认为0
🍊行级排版上下文（IFC）
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平摆放
vertical-align决定一个盒子在行内的垂直对齐
避开浮动（float）元素
🍊块级排版上下文（BFC）
- 某个容器会创建一个BFC 根元素 浮动，绝对定位，inline-block Flex子项和Grid子项 overflow值不是visible的块盒 display:flow-root; BFC内的排版规则 盒子从上到下摆放 垂直margin合并 BFC内盒子的margin不会与外面的合并 BFC不会和浮动元素重叠
