首页 > 其他分享 >纯html 超简易 弹性布局

纯html 超简易 弹性布局

时间:2024-09-04 14:36:20浏览次数:11  
标签:flex center 弹性 简易 html wrap 20px

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">1</div>
        <div class="item">2</div>
    </div>
</body>

<style>
    .box {

        display: flex;
        flex-wrap: wrap ;
        justify-content: center;
        align-items: center
    }

    .item {
        width: 30%;
        height: 50px;
        border-radius: 20px;
        margin: 20px;
        background-color: beige;
    }
</style>

</html>

  

标签:flex,center,弹性,简易,html,wrap,20px
From: https://www.cnblogs.com/uoky/p/18396427

相关文章

  • C# HttpUtility.HtmlAttributeEncode 改用 js 实现
    System.Web.HttpUtility.HtmlAttributeEncode()的实现privatestaticvoidHtmlAttributeEncodeInternal(stringvalue,HttpWriterwriter){intindex=HttpEncoder.IndexOfHtmlAttributeEncodingChars(value,0);if(index==-1){write......
  • 日程安排组件DHTMLX Scheduler v7.1 - 支持RFC-5545格式
    DHTMLXScheduler是一个类似于Google日历的JavaScript日程安排控件,日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间,事件可以按天、周、月三个种视图显示。此版本包括几个备受期待的特性,可以帮助用户增强DHTMLXScheduler的体验。您可以使用流行的RFC-5545格式在......
  • html块级元素
    HTML标签标签定义及使用说明标签定义HTML文档中的一个分隔区块或者一个区域部分。标签常用于组合块级元素,以便通过CSS来对这些元素进行格式化。提示和注释提示:元素经常与CSS一起使用,用来布局网页。注释:默认情况下,浏览器通常会在元素前后放置一个换行符。然而,您......
  • Jforum论坛项目,用Jemter调发布帖子接口,响应结果返回的重定向地址为error...html,导致一
    1.Jmeter的发布帖子接口,使用Jemter代理录制工具进行录制的,发布帖子的参数和接口,都是通过录制得来,如下图,action是insertSave 2.因为需要先登录,再能进行发帖,所以根据项目的cookie保存,增加一个cookie管理器,用来自动保存登录成功后的cookie认证 3.等脚本参数都配置好了之后,......
  • 470.海贼王动漫主题网页 大学生期末大作业 Web前端网页制作 html5+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • HTML中的表格
    一:表格包含的结构        table标签:定义表格            thead标签:表格的头部(可省略)            tbody标签:表格的内容(可省略)            tr标签:定义行            th标签:表头的单元格(......
  • vue2+html2canvas+jspdf 导出网页
    `asynchandlePreview(){constpdf=awaitthis.exportToPdf()//使用浏览器预览PDF-安全策略有缺陷constpdfDataURI=pdf.output('datauristring')window.open(pdfDataURI,'_blank','location=no');},asynchandleDown(){constpdf=awai......
  • uniapp手机端和html中使用mqtt
    最近的项目用到了mqtt,我想了想,还是记下来吧,毕竟我也废了很长的时间在这个上面,首先是uniapp中使用mqtt,查阅了一些资料,前辈们都说使用3.0.0版本,于是我就下载了3.0.0版本的来使用[email protected]在mqtt连接之前要先引入importmqttfrom'mqtt/dist/mqtt.js';......
  • Linux--实现简易shell
    文章目录shell定义和功能myshell.cGetCwd()GetUsrName()GetHostName()MakeCommandLineAndPrint()GetUserCommand()SplitCommand()Die()ExecuteCommand()GetHome()Cd()CheckBuildin()CheckRedir()myshell.c完整代码makefile测试函数和进程之间的相似性Shell是一个功能......
  • 三、HTML+CSS
    HTML和CSS1.选择器,css属性/*注释*/在css3注释的使用p{font-size2px;设置字体大小color:red;设置字体颜色}2.CSS引入方式1.行内样式在HTML标签中使用style属性2.内部样式在页面中使用style标签3.外部样式需要创建.css文件,使用链接式或导入式引入。外部样......