HTML原始代码如下，如何用Flex语法实现A到B的效果

网站 › 『编程语言讨论求助区』 › HTML原始代码如下，如何用Flex语法实现A到B的效果

liuganglove2018 发表于 2023-11-14 16:39

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,p{border:1px black solid;}
div{height:500px;width:400px;display:flex;flex-flow:column wrap;align-items:flex-end;justify-content: flex-start;}
p{width:80px;height:50px;}
#p5{background-color:yellow;}
#p6{background-color:pink;}

</style>

</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p id="p5">5</p>
<p id="p6">6</p>
</div>

</body>
</html>

wang0 发表于 2023-11-14 17:07

div {
   height: 500px;
   width: 400px;
   display: flex;
   flex-flow: column wrap-reverse;
   align-items: flex-start;
   justify-content: flex-start;
}

zxl1227 发表于 2023-11-14 17:14

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

mzq2mmd 发表于 2023-11-14 19:04

页: [1]

免责声明：
吾爱破解所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:Service@52pojie.cn

吾爱破解 - 52pojie.cn's Archiver

HTML原始代码如下，如何用Flex语法实现A到B的效果