display:flex布局，最简单的案例

news2024/11/24 12:14:04

1. 左右贴边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width: 800px;
            background: red;
            height: 200px;
            display: flex;
            justify-content: space-between;
        }
        #parent span{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>

  <div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
  </div>

</body>
</html>

2.左右不贴边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width: 800px;
            background: red;
            height: 200px;
            display: flex;
            justify-content: space-around;
        }
        #parent span{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>

  <div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
  </div>

</body>
</html>

 

 3.元素自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width: 600px;
            background: red;
            height: 300px;
            display: flex;
            /*flex布局中，默认的子元素是不换行的nowrap， 如果装不开，会缩小子元素的宽度，放到父元素里面*/
            flex-wrap: wrap;/*换行*/
        }
        #parent span{
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 5px;
        }
    </style>
</head>
<body>

  <div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>3</span>
      <span>3</span>
      <span>3</span>
      <span>3</span>
      <span>3</span>

  </div>

</body>
</html>

4.垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width: 600px;
            background: red;
            height: 300px;
            display: flex;
            /*默认的主轴是 x轴 row */
            justify-content: center;
            /*我们需要一个侧轴居中*/
            align-items: center;
        }
        #parent span{
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 5px;
        }
    </style>
</head>
<body>
<div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

 

5.子元素的高度自适应父元素（拉伸）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width: 600px;
            background: red;
            height: 300px;
            display: flex;
            /*默认的主轴是 x轴 row */
            justify-content: center;
            /*拉伸，但是子盒子不要给高度*/
            align-items:stretch;
        }
        #parent span{
            width: 100px;
            background: yellow;
            margin: 5px;
        }
    </style>
</head>
<body>
<div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2045898.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vscode 远程免密登录

vscode 远程免密登录

Windows R 输入 cmd在命令行终端中输入 ssh-keygen 一直回车、确定 生成秘钥 3. C:\用户\xxx.ssh 拷贝公钥内容 id_rsa.pub 4. 在虚拟机~/.ssh/ 下创建文件touch authorized_keys,拷贝公钥内容 id_rsa.pub粘贴到authorized_keys里即可。
阅读更多...
某市-2024【网安·理论】初赛-web1-扫雷-wp

某市-2024【网安·理论】初赛-web1-扫雷-wp

进来是个简单的扫雷 看源码是纯js写的 看了下主要格子之类的生成逻辑在jms.js里 其中flag的输出条件也包含在jms.js 格式化了一下 看特征是base64了&#xff0c;然后又经过了别的操作&#xff0c;不过他混淆了一下就懒得看了。 知道的是每过一个难度的都可以拿到1/3个fl…
阅读更多...
【网络】UDP回显服务器和客户端的构造，以及连接流程

【网络】UDP回显服务器和客户端的构造，以及连接流程

回显服务器&#xff08;Echo Server&#xff09; 最简单的客户端服务器程序&#xff0c;不涉及到业务流程&#xff0c;只是对与 API 的用法做演示 客户端发送什么样的请求&#xff0c;服务器就返回什么样的响应&#xff0c;没有任何业务逻辑&#xff0c;没有进行任何计算或者…
阅读更多...
【操作系统】什么是进程？什么是线程？两者有什么区别（面试常考！！！）

【操作系统】什么是进程？什么是线程？两者有什么区别（面试常考！！！）

什么是进程/任务&#xff08;Process/Task&#xff09; 当我们打开我们的电脑的任务管理器就可以看到我们的电脑正在执行的进程。 每个应用程序运行于现代操作系统之上时&#xff0c;操作系统会提供一种抽象&#xff0c;好像系统上只有这个程序在运行&#xff0c;所有的硬件资…
阅读更多...
基于Springboot 和Vue 的高校宿舍管理系统源码

基于Springboot 和Vue 的高校宿舍管理系统源码

网络上很多宿舍管理系统都不完整&#xff0c;大多数缺少数据库文件&#xff0c;所在使用极其不方便&#xff0c;由于本人程序员&#xff0c;根据代码&#xff0c;自己花时间不全了数据库文件&#xff0c;并且可以完美运行&#xff01;&#xff01;&#xff01;&#xff01;&…
阅读更多...
使用MQ的考量：系统可用性与复杂性

使用MQ的考量：系统可用性与复杂性

使用MQ的考量&#xff1a;系统可用性与复杂性 一、降低系统可用性二、增加系统复杂性 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 消息队列&#xff08;MQ&#xff09;在软件开发中扮演重要角色&#xff0c;但其使用也带来一些问题。本文…
阅读更多...
原型与原型链与继承

原型与原型链与继承

原型、原型链与继承 构造函数 构造函数创建实例的过程 1.创建一个新对象 2.将空对象的__proto__指向构造函数的原型 3.修改构造函数中this指向&#xff0c;将构造函数中的this指向实例对象&#xff0c;执行构造函数中的代码&#xff0c;给这个新对象添加属性和方法&#x…
阅读更多...
机器学习笔记：注意力机制中多头注意力的实现

机器学习笔记：注意力机制中多头注意力的实现

目录 介绍 模型 代码实现 引入库 单个注意力头 多个注意力头的实现 测试 思考 介绍 在注意力机制中&#xff0c;单个注意力学到的东西有限&#xff0c;可以通过对不同的注意力进行组合&#xff0c;学到不同的知识&#xff0c;以达到想要的目的。因此采用”多头注意力…
阅读更多...
windows 安装 Mysql

windows 安装 Mysql

一、安装Mysql 下载完成后直接双击进行安装 安装一路默认 如下图所示&#xff0c;在MySQL Servers/MySQL Server/MySQL Server 5.7的下方找到MySQL Server 5.7.41 - X64&#xff0c;然后选中它&#xff0c;点击两框之间的第一个箭头&#xff0c;将其移到右边的框中 点击Exe…
阅读更多...
接口基础知识8_详解response header（响应头）

接口基础知识8_详解response header（响应头）

课程大纲 一、定义 HTTP响应头&#xff08;HTTP Response Header&#xff09;&#xff1a;在HTTP协议中用于描述服务器响应的元数据。 它是服务器在响应客户端请求时&#xff0c;发送给客户端的一部分响应信息&#xff0c;包含了服务器的相关配置和响应内容的描述。 二、常见…
阅读更多...
[机器学习]--KNN算法(K邻近算法)

[机器学习]--KNN算法(K邻近算法)

KNN (K-Nearest Neihbor,KNN)K近邻是机器学习算法中理论最简单,最好理解的算法,是一个 非常适合入门的算法,拥有如下特性: 思想极度简单,应用数学知识少(近乎为零),对于很多不擅长数学的小伙伴十分友好虽然算法简单,但效果也不错 KNN算法原理 上图是每一个点都是一个肿瘤病例…
阅读更多...
【C++深度探索】unordered_set、unordered_map封装

【C++深度探索】unordered_set、unordered_map封装

&#x1f525; 个人主页&#xff1a;大耳朵土土垚 &#x1f525; 所属专栏&#xff1a;C从入门至进阶 这里将会不定期更新有关C/C的内容&#xff0c;欢迎大家点赞&#xff0c;收藏&#xff0c;评论&#x1f973;&#x1f973;&#x1f389;&#x1f389;&#x1f389; 文章目录…
阅读更多...
CSS继承、盒子模型、float浮动、定位、diaplay

CSS继承、盒子模型、float浮动、定位、diaplay

一、CSS继承 1.文字相关的样式会被子元素继承。 2.布局样式相关的不会被子元素继承。&#xff08;用inherit可以强行继承&#xff09; 实现效果&#xff1a; 二、盒子模型 每个标签都有一个盒子模型&#xff0c;有内容区、内边距、边框、外边距。 从内到外&#xff1a;cont…
阅读更多...
基于 Android studio 实现停车场管理系统--原创

基于 Android studio 实现停车场管理系统--原创

目录 一、项目演示 二、开发环境 三、项目页面 四、项目详情 五、项目完整源码 一、项目演示 二、开发环境 三、项目详情 1.启动页 这段代码是一个简单的Android应用程序启动活动&#xff08;Activity&#xff09;&#xff0c;具体功能如下&#xff1a; 1. **延迟进入登…
阅读更多...
计算机网络三级笔记--原创 风远 恒风远博

计算机网络三级笔记--原创 风远 恒风远博

典型设备中间设备数据单元网络协议物理层中继器、集线器中继器、集线器数据位(bit) binary digit二进 制数据的缩写HUB使用了光纤、 同轴电缆、双绞 线.数据链路层网卡、网桥、交换机网桥、交换机数据帧(Frame)STP、ARQ、 SW、CSMA/CD、 PPP(点对点)、 HDLC、ATM网络层路由器、…
阅读更多...
SQL注入（cookie、base64、dnslog外带、搜索型注入）

SQL注入（cookie、base64、dnslog外带、搜索型注入）

目录 COOKIE注入 BASE64注入 DNSLOG注入—注入判断 什么是泛解析&#xff1f; UNC路径 网上邻居 LOAD_FILE函数 搜索型注入—注入判断 本文所使用的sql注入靶场为sqli-labs-master&#xff0c;靶场资源文件已上传&#xff0c;如有需要请前往主页或以下链接下载 信安必备…
阅读更多...
【漫谈C语言和嵌入式002】嵌入式中的大小端

【漫谈C语言和嵌入式002】嵌入式中的大小端

在计算机科学中&#xff0c;"端序"&#xff08;Endianness&#xff09;是指多字节数据类型&#xff08;如整数或浮点数&#xff09;在内存中的存储方式。主要分为两种&#xff1a;大端模式&#xff08;Big-Endian&#xff09;和小端模式&#xff08;Little-Endian&am…
阅读更多...
星戈瑞FITC-DXMS荧光素标记地塞米松不同方向的应用

星戈瑞FITC-DXMS荧光素标记地塞米松不同方向的应用

FITC-DXMS&#xff0c;全称异硫氰基荧光素-地塞米松&#xff0c;是一种创新的科研试剂。他是由FITC-NH2的&#xff08;-NH2&#xff09;氨基与地塞米松的-OH&#xff08;羟基&#xff09;结合。它结合了地塞米松的特性和荧光素的高灵敏度标记技术&#xff0c;为医药研究、生物医…
阅读更多...
栈与括号匹配——20、636、591、32（简中难难）

栈与括号匹配——20、636、591、32（简中难难）

20. 有效的括号&#xff08;简单&#xff09; 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭…
阅读更多...
springboot的学习（二）：常用配置

springboot的学习（二）：常用配置

简介 springboot的各种常用的配置。 springboot 项目是要打成jar包放到服务器上运行的。 打包 idea上使用maven打包的时候&#xff0c;会执行自动测试&#xff0c;可能会对数据库中的数据有影响&#xff0c;先点跳过测试&#xff0c;在点package。 运行 Windows上运行的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023