Flex实战五（容器属性justify-content）

最新推荐文章于 2024-03-08 09:02:48 发布

king.sheng

最新推荐文章于 2024-03-08 09:02:48 发布

阅读量249

点赞数

分类专栏： Flex

本文链接：https://blog.csdn.net/shengxiaohua1/article/details/104898587

版权

Flex 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

justify-content属性定义了项目在主轴上的对齐方式（左中右）
.box{justify-content: flex-start | flex-end | center | space-between | space-around}

flex-start:默认值左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间间隔都相等
space-around：每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>justify-content属性</title>
</head>

<body>
   <style>
     .myflex{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   justify-content: flex-start;
	 }
	 
	  .myflex2{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   justify-content: flex-end;
	 }
	 
	  
	  .myflex3{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   justify-content: center;
	 }
	 
	 
	   .myflex4{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   justify-content: space-between;
	 }
	 
	   .myflex5{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   justify-content: space-around;
	 }
	 
	 .flex-item{
	   background-color: #F93;
	   width: 70px;
	   height: 70px;
	   margin: 10px;
	 }
   </style>
   <p>justify-content: flex-start</p>
   <div class="myflex">
     <div class="flex-item">01</div>
	 <div class="flex-item">02</div>
	 <div class="flex-item">03</div>
   </div>
   
   <p>justify-content: flex-end</p>
   <div class="myflex2">
     <div class="flex-item">01</div>
	 <div class="flex-item">02</div>
	 <div class="flex-item">03</div>
   </div>
   
  <p>justify-content: flex-center</p>
   <div class="myflex3">
     <div class="flex-item">01</div>
	 <div class="flex-item">02</div>
	 <div class="flex-item">03</div>
   </div>
   
   <p>justify-content: space-between</p>
   <div class="myflex4">
     <div class="flex-item">01</div>
	 <div class="flex-item">02</div>
	 <div class="flex-item">03</div>
   </div>
   
   <p>justify-content: space-around</p>
   <div class="myflex5">
     <div class="flex-item">01</div>
	 <div class="flex-item">02</div>
	 <div class="flex-item">03</div>
   </div>
</body>
</html>

king.sheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex实战五（容器属性justify-content）

justify-content属性定义了项目在主轴上的对齐方式（左中右）.box{justify-content: flex-start | flex-end | center | space-between | space-around}flex-start:默认值左对齐flex-end：右对齐center：居中space-between：两端对齐，项目之间间隔都相等space-a...
复制链接

扫一扫

专栏目录