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

梦里梦外; 2023-10-17 19:08 1阅读 0赞

<!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>

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序样式Flex Box精通课程-Flex容器的属性-flex-direction 项目排列方向

flex-direction 项目排列方向微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/

短命女/ 2024年02月19日 15:38/ 0 赞/ 42 阅读

相关 flex4 设置圆角

<s:Rect width="100%" height="100%" left="0" top="0" right="0" topLeftRadiusX="3" topRigh

「爱情、让人受尽委屈。」/ 2023年08月17日 15:51/ 0 赞/ 134 阅读

相关 css交叉轴布局

交叉轴：主轴垂直方向，默认垂直起点上面设置元素在交叉轴上的对齐方式 flex-start 默认值交叉轴起点 flex-end 交叉轴末端 center 居

╰半橙微兮°/ 2023年06月12日 09:21/ 0 赞/ 6 阅读

相关弹性盒之主轴与交叉轴的区分

这周学习了弹性盒，而其中要区分好主轴和交叉轴，否则搞不清楚其排列的顺序： ①当里面的盒子为水平排列时：（没有折行发生时）没有折行现象时不存在交叉轴： ![在这里插

傷城~/ 2023年05月28日 14:29/ 0 赞/ 2 阅读

相关 Echarts设置y轴值间隔

需求：如图，y轴之间的距离太小，这样就太过于拥挤了，现在要修改echarts里面的属性，设置y轴值间隔让图表看上去舒服一些。 ![a759335b7ab08bfcf2f291

忘是亡心i/ 2022年12月24日 04:58/ 0 赞/ 445 阅读

相关学习使用echarts设置xAxis轴和yAxis轴属性实现隐藏x轴，y轴，刻度线，网格

学习使用echarts设置xAxis轴和yAxis轴属性实现隐藏x轴，y轴，刻度线，网格未设置隐藏属性效果图设置隐藏后效果图

心已赠人/ 2022年10月06日 00:57/ 0 赞/ 450 阅读

相关 excel中两列如何进行交叉排列组合

经常碰到需要将excel中两列数据相互交叉组合，就是A列的每一个数据去和B列每一个组合 ![excel中两列如何进行交叉排列组合][excel] 解决方法：把函数写到c

Myth丶恋晨/ 2022年08月27日 07:56/ 0 赞/ 1707 阅读

相关 Flex设置toolTip样式

在你有用tooltip属性的页面中，当 creationComplete="initApp()"时， public function initApp():void\{

r囧r小猫/ 2022年08月03日 23:45/ 0 赞/ 60 阅读

相关 flex容器主轴上的部分元素单独设置位置

就是利用主轴上的需要单独设置位置的元素填充剩下的空间，然后将其设置成flex容器，它的子元素就可以靠其他位置了 <!DOCTYPE html> <html>

爱被打了一巴掌/ 2022年01月20日 07:37/ 0 赞/ 502 阅读

相关 echarts设置y轴值间隔

在标签yAxis 中，设置min,max,splitNumber: 例如： min:0, max:1, spl

我不是女神ヾ/ 2021年07月26日 19:15/ 0 赞/ 923 阅读