Flex实战六（容器属性align-items）

最新推荐文章于 2024-02-12 10:11:26 发布

king.sheng

最新推荐文章于 2024-02-12 10:11:26 发布

阅读量322

点赞数

分类专栏： Flex

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

版权

Flex 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

align-items属性定义项目在交叉轴上如何对齐。（上中下）
.box{align-items: flex-start | flex-end | center | baseline |stretch}

flex-start: 交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
在这里插入图片描述

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

<body>
   <style>
     .myflex{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   align-items: flex-start;
	 }
	 
	  .myflex2{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	    align-items: flex-end;
	 }
	 
	  
	  .myflex3{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	  align-items: center;
	 }
	 
	 
	   .myflex4{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   align-items: baseline;
	 }
	 
	  .myflex5{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   align-items: stretch;
	 }
	 
	  .flex-item{
	   background-color: #F93;
	   width: 50px;
	   margin: 10px;
	 }
	 
	 .flex-item1{
	   background-color: #F93;
	   width: 50px;
	   height: 50px;
	   margin: 10px;
	 }
	 
	 .flex-item2{
	   background-color: #F93;
	   width: 100px;
	   height: 100px;
	   margin: 10px;
	 }
	 
	 .flex-item3{
	   background-color: #F93;
	   width: 70px;
	   height: 70px;
	   margin: 10px;
	 }
   </style>
   <p>align-items: flex-start</p>
   <div class="myflex">
     <div class="flex-item1">01</div>
	 <div class="flex-item2">02</div>
	 <div class="flex-item3">03</div>
   </div>
   
   <p>align-items: flex-end</p>
   <div class="myflex2">
     <div class="flex-item1">01</div>
	 <div class="flex-item2">02</div>
	 <div class="flex-item3">03</div>
   </div>
   
  <p>align-items: center</p>
   <div class="myflex3">
     <div class="flex-item1">01</div>
	 <div class="flex-item2">02</div>
	 <div class="flex-item3">03</div>
   </div>
   
   <p>align-items: baseline</p>
   <div class="myflex4">
     <div class="flex-item1">01</div>
	 <div class="flex-item2">02</div>
	 <div class="flex-item3">03</div>
   </div>
   
   <p>align-items: stretch</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实战六（容器属性align-items）

align-items属性定义项目在交叉轴上如何对齐。（上中下）.box{align-items: flex-start | flex-end | center | baseline |stretch}flex-start: 交叉轴的起点对齐flex-end：交叉轴的终点对齐center：交叉轴的中点对齐baseline：项目的第一行文字的基线对齐stretch（默认值）：如果项目未...
复制链接

扫一扫