弹性布局(Flex)
## 弹性盒子(父级)
弹性布局
父级 叫做弹性容器
子级 叫做弹性元素
下面七种样式都是在父级容器(弹性容器)里面设置的
1.定义弹性盒子
display:flex
2.用于控制弹性盒子里面的弹性元素排列的方向
flex-direction
row从左到右 row-reverse从右到左 column从上到下 column-reverse从下到上
3.规定是单行还是多行
flex-wrap
nowrap 默认 元素不拆行或不拆列
wrap 必要的时候拆行或拆列
wrap-reverse 必要的时候拆行或拆列,但是拆的方向是相反的
4.flex-flow
flex-wrap和direction的结合体
轴的概念
主轴 交叉轴
5.控制元素在主轴上的排列方式
justify-content
flex-start 紧靠开头
flex-end 紧靠结尾
center 居中
space-between 第一个元素紧靠七点第二个元素紧靠重点 其他空间由其他元素平均分配
space-around 每个元素两侧的间距相等
space-evenly 元素间距距离平均分配
6.控制元素在交叉轴上的排列方式
align-items
stretch 元素被拉伸以适应容器(没有设置固定的行高或者大于高度字体大小)
center 位于容器的中心
flex-start 紧靠交叉轴的开头
flex-end 紧靠交叉轴的结尾
7.适用于多行用于控制行而不是元素在交叉轴的排列方式
align-content
flex-start 每一行紧靠交叉轴开始位置
flex-end 每一行紧靠交叉轴的结束位置
center 居中 紧靠交叉轴的中间位置
space-between 第一行紧靠起点最后一行紧靠终点 其他空间由其他行平均分配
space-around 每行两侧的间距相等
space-evenly 每行间距距离平均分配
下面的都是在弹性元素里面的写的 放在弹性的盒子里面的元素都叫弹性元素 注意: 不用使用float和clear规则 弹性元素都为块级元素 绝对定位不参与弹性布局
## 弹性元素(子级)
1.align-self
用来设置单个元素在交叉轴的排列方式
stretch 默认方式平均分配
flex-start 单个元素紧靠交叉轴的开始位置
flex-end center
2.flex-grow
用于将弹性盒子的可用空间,分配给弹性元素
3.flex-shrink
装不下的时候定义的缩小值 0 1 2 3 …
3.flex-basis
定在了在在分配多余空间之间项目占据的主轴空间
优先级更高的width
4.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>
*{
margin: 0;
padding: 0;
}
.father{
/* width: 1200px; */
height: 300px;
border: 3px solid gold;
display: flex;
flex-flow:row nowrap;
justify-content: start;
margin-top: 150px;
/* stretch 元素被拉伸以适应容器 */
/* align-content: space-evenly; */
/* align-items: space-between; */
}
.father div{
width: 250px;
height: 100px;
border: 2px solid pink;
text-align: center;
line-height: 100px;
font-size: 40px;
}
.father div:nth-of-type(1){
align-self: flex-start;
width: 240px;
flex-grow: 1;
flex-shrink: 0;
order: 4;
}
div:nth-of-type(2){
align-self: flex-start;
flex-grow: 3;
flex-shrink: 1;
order: 3;
}
div:nth-of-type(3){
align-self: flex-start;
flex-grow: 5;
flex-shrink: 4;
}
div:nth-of-type(4){
align-self: flex-start;
flex-grow: 7;
flex-shrink: 4;
}
</style>
</head>
<body>
<div class="father">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</div>
</body>
</html>
沿着X主轴排列的几种情况:
justify-content
flex-start 紧靠开头
flex-end 紧靠结尾
center 居中
space-between 第一个元素紧靠七点第二个元素紧靠重点 其他空间由其他元素平均分配
space-around 每个元素两侧的间距相等
space-evenly 元素间距距离平均分配
控制元素在交叉轴上的排列方式
align-items
stretch 元素被拉伸以适应容器(没有设置固定的行高或者大于高度字体大小)
center 位于容器的中心
flex-start 紧靠交叉轴的开头
flex-end 紧靠交叉轴的结尾
## 弹性元素(子级)
1.align-self
用来设置单个元素在交叉轴的排列方式
stretch 默认方式平均分配
flex-start 单个元素紧靠交叉轴的开始位置
flex-end center
2.flex-grow
用于将弹性盒子的可用空间,分配给弹性元素
3.flex-shrink
装不下的时候定义的缩小值 0 1 2 3 ....
3.flex-basis
定在了在在分配多余空间之间项目占据的主轴空间
优先级更高的width
4.order
调整元素的位置
总结:总之在了解弹性布局的各项元素之后,还是要将弹性布局放到实际案例中去,结合实际来用,作用不可小觑,我们主要用上面详细介绍的父级容器的排列方式,这个以后用的挺多的,子级元素用的比较少,大家了解一下即可不需要深究!