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>背景特效</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 将整个页面设为弹性布局 */
body{
display: flex;
/* 元素在主轴(屏幕长)和交叉轴(屏幕宽)上居中 */
/*屏幕居中 */
justify-content: center;
align-items: center;
}
.box_out{
width: 1200px;
display: flex;
/* 元素平均分配 */
justify-content: space-between;
margin-top: 15%;
}
.box_out .box{
position: relative;
/* 改变堆叠元素顺序 */
z-index: 1;
width: 360px;
background-color: #fff;
overflow: hidden;
/* 改变盒子大小,使内部的元素与其边框产生距离相等 */
box-sizing: border-box;
padding: 30px;
box-shadow: -10px 25px 50px rgba(0, 0, 0, 0.2);
}
.box_out .box:hover{
box-shadow: -20px 50px 100px rgba(0, 0, 0, 0.5);
}
/* 将背景颜色拉伸充满全屏*/
.box_out .bg{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.box1:hover~.bg,.box1:hover{
opacity: 1;
background-image: linear-gradient(pink,black);
}
.box2:hover~.bg,.box2:hover{
opacity: 1;
background-image: linear-gradient(yellow,green);
}
.box3:hover~.bg,.box3:hover{
opacity: 1;
background-image: linear-gradient(yellowgreen,blue);
}
</style>
</head>
<body>
<div class="box_out">
<div>
<div class="box box1">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Deserunt odio magni ducimus optio quidem dignissimos
temporibus quae veritatis
velit dolorum officiis ex natus labore nemo consequuntur
obcaecati dolore, incidunt qui!
</p>
<h2>Somedolore</h2>
</div>
<div class="bg"></div>
</div>
<div>
<div class="box box2">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Deserunt odio magni ducimus optio quidem dignissimos
temporibus quae veritatis
velit dolorum officiis ex natus labore nemo consequuntur
obcaecati dolore, incidunt qui!
</p>
<h2>Somedolore</h2>
</div>
<div class="bg"></div>
</div>
<div>
<div class="box box3">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Deserunt odio magni ducimus optio quidem dignissimos
temporibus quae veritatis
velit dolorum officiis ex natus labore nemo consequuntur
obcaecati dolore, incidunt qui!
</p>
<h2>Somedolore</h2>
</div>
<div class="bg"></div>
</div>
</div>
</body>
</html>