flex设置交叉轴上的终点排列

Flex布局实战案例

最新推荐文章于 2024-11-04 15:53:43 发布

盏茶作酒

最新推荐文章于 2024-11-04 15:53:43 发布

阅读量561

点赞数

CC 4.0 BY-SA版权

分类专栏： flex设置交叉轴上的终点排列文章标签： flex设置交叉轴上的终点排列

本文链接：https://blog.youkuaiyun.com/qq_40999917/article/details/79932231

flex设置交叉轴上的终点排列专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用CSS Flex布局实现的实战案例，展示了如何通过简单的HTML结构配合特定的Flex属性完成元素在容器内的对齐与分布。重点介绍了justify-content与align-items属性的应用技巧。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       *{
           padding:0;
           margin:0;
       }
       /*flex里的项目是不脱离文档流的*/
       #hd{
          width:80%;
          border:4px solid orangered;
          height:500px;
          margin:20px auto;
          /*指定容器里的项目为弹性布局*/
          display: flex;
          /*两端对齐，项目之间的间隔都相等*/
          justify-content: space-between;
          /*设置交叉轴上的起点排列*/
          /*align-items: flex-start;*/
          /*设置交叉轴上的终点排列*/
          align-items: flex-end;
          /*设置交叉轴上的中点排列*/
          /*align-items: center;*/
          /*项目的第一行文字的基线对齐*/
          /*align-items: baseline;*/
          /*如果项目未设置高度或设置高度为auto，将占满整个容器的高度*/
          /*align-items: stretch;*/

       }
       #hd>div{
          width:150px;
          /*height:232px;*/
          font-size:30px;
          color:white;
          text-align:center;
          background:dodgerblue;
          border:1px solid purple;
       }
   </style>
</head>
<body>
   
   
   <div id="hd">
       <div style="height:300px">1</div>
       <div style="height:400px">2</div>
       <div style="height:450px">3</div>
       <div style="height:200px">4</div>
       <div style="height:100px">5</div>
       <div></div>
   </div>
</body>
</html>