css 布局难题:使用 flex 或 grid 排列 html 元素
考虑以下 html 结构:
<div> <em>1</em> <em>2</em> <em>3</em> <em>4</em> </div>
我们希望在不改变 html 结构的情况下,使用 flex 或 grid 布局,将元素排列成如下效果:
flex 布局
立即学习“前端免费学习笔记(深入)”;
在 flex 布局中,采用以下样式:
div { display: flex; justify-content: space-between; } em:nth-child(2), em:nth-child(3) { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
grid 布局
在 grid 布局中,采用以下样式:
div { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; } em:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } em:nth-child(2) { grid-column: 2; grid-row: 1; } em:nth-child(3) { grid-column: 2; grid-row: 2; } em:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
以上就是如何使用 flex 或 grid 布局将 HTML 元素排列成指定效果?的详细内容,更多请关注php中文网其它相关文章!
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号