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

[CSS] 纯文本查看 复制代码

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

提示: 作者被禁止或删除内容自动屏蔽

帐号		自动登录	找回密码
密码			注册[Register]

mzq2mmd mzq2mmd 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	mzq2mmd 发表于 2023-11-14 19:04 《站点帮助文档》有什么问题来这里看看吧，这里有你想知道的内容！提示: 作者被禁止或删除内容自动屏蔽
	呼吁大家发布原创作品添加吾爱破解论坛标识！
	回复支持举报

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

免费评分