css3弹性盒模型

介绍

弹性盒模型是css3的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。

在这里插入图片描述

  • 主轴（main axis）
  • 交叉轴（cross axis）

注意：生命display:flex 默认水平排列

弹性盒模型使用（父元素）

1. 创建基本代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">

</style>
<body>

   <div class="warp">
     <div class="box box-1">1</div>
     <div class="box box-2">2</div>
     <div class="box box-3">3</div>
   </div>


<style type="text/css">
  .warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  }

  .box{
  	height: 200px;
  	width: 200px;
  	color: white;
  	font-size: 40px;
  }
  .box-1{
  	background: #FAC863

  }
  .box-2{
    background:	#1B2B34
  }
  .box-3{
  	background: #2ecc71
  }
  
</style>


</body>

</html>

在这里插入图片描述

2. 定义弹性模型

.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
  }

在这里插入图片描述

发现元素内部默认为水平居中

3. 水平居中

.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
  	/*水平居中*/
    justify-content: center;
  }

在这里插入图片描述

4. 水平开始排列

 .warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
  	/*水平开始排列*/
    justify-content: flex-start;
  }

在这里插入图片描述

5. 水平结尾排列

.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
  	/*水平结尾排列*/
    justify-content: flex-end;
  }

在这里插入图片描述

6. 水平分散排列（占用开头）

.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
  	/*水平平均排列*/
    justify-content: space-between;
  }

在这里插入图片描述

7. 水平分散排列（不占用开头，开头距离不均匀）

在.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
  	/*水平平均排列*/
    justify-content: space-around;
  }

在这里插入图片描述

8. 水平分散排列（不占用开头，开头距离均匀）

.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
  	/*水平平均排列*/
    justify-content: space-evenly;
  }

在这里插入图片描述

9. 垂直

.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
  	/*垂直*/
    flex-direction: column;
  }

在这里插入图片描述

10. 垂直居中

.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
  	/*垂直排列*/
    flex-direction: column;
    /*居中*/
   justify-content: center; 

  }

在这里插入图片描述

11.垂直水平居中（常用）

.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
  	/*垂直排列*/
    flex-direction: column;
    /*居中*/
   justify-content: center; 
    /*水平居中*/
    align-items: center;
  }

在这里插入图片描述

12.水平垂直居中（常用）

.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
    /*垂直居中*/
   justify-content: center; 
    /*水平居中*/
    align-items: center;
  }

在这里插入图片描述

弹性盒模型使用（子元素）

1.如何保证子元素在自适应的时候样式不发生改变

在这里插入图片描述

.warp{
  	height: 880px;
  	border: 20px solid antiquewhite;
  	/*定义弹性模型*/
  	display: flex;
    /*垂直居中*/
   justify-content: center; 
    /*水平居中*/
    align-items: center;
     /*空间不足自动换行，不改变原有子元素样式*/
    flex-wrap: wrap;
  }

在这里插入图片描述

2.如何让子元素充分站满父元素空间？

在这里插入图片描述

.box-1{
  	background: #FAC863;
    flex: 1;
  }

在这里插入图片描述

3. 如何不修改标签顺序而改变标签顺序呢

在这里插入图片描述

.box-1{
  	background: #FAC863;
  	 order: 3;
  }

  .box-2{
    background:	#1B2B34;
     order: 2;
  }
  .box-3{
  	background: #2ecc71;
  	 order: 1;
  }

在这里插入图片描述

posted @ 2022-04-12 17:29  xiye1  阅读(47)  评论(0)    收藏  举报