花儿为何那样红 2021-03-26 18:53 采纳率: 100%
浏览 50
已采纳

如何用flex布局完成如图布局

 

  • 写回答

4条回答 默认 最新

  • CSDN专家-天际的海浪 2021-03-26 19:19
    关注
    <!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#box {
	display: flex;
	flex-flow: column wrap;
	align-content: flex-start;
	width: 100%;
	height:200px;
}
#box > div{
	width: 100px;
	height: 48px;
	border: 1px solid #999;
}
</style>
</head>
<body>


<div id="box">
	<div>A</div>
	<div>B</div>
	<div>C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
	<div>G</div>
	<div>H</div>
	<div>I</div>
	<div>J</div>
</div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

  • 使用flex布局的前端静态网页.zip
    2022-10-21 12:51
    使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip
  • 前端flex布局
    2024-05-31 20:47
    豆豆大世界的博客 一篇文章带你看懂flex弹性布局
  • 携程网站 移动端 Flex布局
    2023-06-08 14:44
    携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
  • 前端布局入门：flex、grid 及其他常用布局
    2025-10-17 22:18
    Demoncode_y的博客 选择建议：​若需实现简单的单行列布局（如导航栏、列表），优先使用 flex 布局，代码更简洁。​若需实现复杂的多行列布局（如卡片矩阵、仪表盘），优先使用 grid 布局，能大幅减少代码量。​。
  • 前端学习--用flex布局来写--携程首页
    2022-05-11 23:37
    在前端开发领域，布局设计是至关重要的，而Flex布局（Flexible Box Layout）是现代Web页面布局的主流方式之一。本文将深入探讨如何使用Flex布局来重构携程首页，并结合HTML和CSS进行实现，不涉及JavaScript部分。 ...
  • 前端-flex布局案例
    2021-03-20 11:43
    在前端开发中，Flex布局（Flexible Box Layout）是一种强大的盒模型布局方式，旨在提供更为灵活的版面控制，尤其在响应式设计中扮演着至关重要的角色。本案例将深入探讨Flex布局的核心概念、属性以及如何在实际项目...
  • Flex布局详解[源码]
    2025-11-12 16:45
    因此，开发者在项目中可以放心地使用Flex布局来创建优雅、灵活的网页界面。 Flex布局的优势在于其简洁性和高效性，它以一种直观的方式解决了复杂的布局问题，让开发者能够轻松地构建响应式网页。通过合理运用Flex...
  • CSS Flex布局详解及其重要属性应用
    2024-10-09 13:47
    内容概要：本文深入讲解了CSS Flex布局的基本理念以及其对于现代Web开发尤其是移动互联网的重要性。详述了flex布局下父级flex container及子元素flex item的相关属性，具体介绍了flex-direction、flex-wrap等关键...
  • Flex布局教程[项目代码]
    2025-11-24 14:50
    通过阅读和实践，即使是对CSS布局不太熟悉的前端开发者也能掌握Flex布局的使用技巧，让网页布局更加灵活和高效。 无论是响应式设计还是复杂组件的布局，Flex布局都提供了一种强大的工具来构建现代web界面。它的出现...
  • Flex布局详解[代码]
    2025-11-18 06:20
    前端开发者在使用Flex布局时，还需要考虑到浏览器兼容性的问题，尽管Flex布局已经得到了现代浏览器的广泛支持，但在一些旧版本的浏览器中仍需谨慎使用或提供回退方案。此外，适当的布局测试和调试也是不可或缺的步骤...
  • 没有解决我的问题, 去提问