程序员经验分享-hwhale

align-content 设置多行下的子元素排列方式 代码和图片展示

2023-11-20

align-content 适用于 换行 （多行）的情况下 单行无效 ，可以设置上对齐 居中拉伸和平均分配剩余空间等属性值
*** 属性值：

  • flex-start 默认值 在侧轴头部开始排列
  • flex-end 在侧轴尾部开始排列
  • center 在侧轴中间排列
  • space-around 子项在侧轴平分剩余空间
  • stretch 设置子项元素高度平分父元素高度**
  • align-content: space-between; 设置子项贴边排列
  div{
            display: flex;
            margin: 100px auto;
            width: 1100px;
            height: 800px;
            background-color: yellow;
            /* 换行显示 */
            flex-wrap: wrap;
            /* 主轴上的子元素居中对齐 */
            justify-content: center;
            /* 设置侧轴上的 子元素居中对齐 */
            align-content: center;
            /* 在尾部排列 */
            /* align-content: flex-end; */
            /* 子项在侧轴平分剩余空间 */
            /* align-content: space-around; */
            /* 子项在侧轴贴边排列 */
            /* align-content: space-between; */
            /* 设置子项元素高度平分父元素高度 */
               /* align-content: stretch; */
        }
        div span{
            margin: 2px;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>

默认效果
在这里插入图片描述

设置侧轴上的 子元素居中对齐
align-content: center;
在这里插入图片描述
在尾部排列
align-content: flex-end;
在这里插入图片描述

子项在侧轴平分剩余空间
align-content: space-around;
在这里插入图片描述
子项在侧轴贴边排列
align-content: space-between;
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html5

css

html

CSS3

移动开发

align-content 设置多行下的子元素排列方式 代码和图片展示 的相关文章

  • 如何在Nightwatch中测试伪元素的css属性

    我想使用 Nightwatch 测试我的网站上的背景图像是否正确 但它设置为 before 伪元素的背景 这是 CSS icon circle delete before content background url images svg

  • 工具提示出现在 intro.js 移动视图中的元素上方

    我正在使用 intro js 初步浏览我网站上的页面 该游览在桌面上看起来不错 但在移动设备上 工具提示出现在它所描述的元素的正上方 用户无法在移动视图中看到该元素 因为工具提示出现在该元素的正上方 见下图 我尝试自定义工具提示的位置 但输

  • 标记对话（或采访）的最语义方式？

    我试图找出最语义化的方式来标记这样的东西 John blah blah Paul blah blah George blah blah Ringo blah blah or John blah blah Paul blah blah Geo

  • 如何导出从 HTML DOM 解析器检索到的所有图像？

    我想要 使用从我的网站获取所有图像PHP 简单 HTML DOM 解析器 http simplehtmldom sourceforge net 并将它们全部导出到我的桌面ALL立刻 Not右键单击保存或屏幕截图 OPTIONAL 保存所有h

  • 无法将 event.target 转换为字符串

    为了识别用户单击的元素 我尝试使用事件对象target document click function e var str e target toString console log str if str indexOf some clas

  • Objective-C / Cocoa Touch 中的 HTML 字符解码

    首先 我发现了这个 https stackoverflow com questions 659602 objective c html escape unescapeObjective C HTML 转义 unescape https st

  • 在什么情况下使用html 5的
    标签来代替

    你在什么场景下使用 section html 5 的标签 代替 div 章节的示例包括章节 选项卡式对话框中的各个选项卡式页面或论文的编号部分 网站的主页可以分为介绍 新闻和联系信息几个部分 部分元素表示通用文档或应用程序部分 部分元素不是

  • 使用 html/javascript/css 的弹出表单

    我必须在弹出窗口中打开一个 html 表单 弹出窗口不应该是一个窗口 通常使用 window open 创建 而应该像下面的链接中出现的那样 在 Firefox 中打开 http www w3schools com js tryit asp

  • 选择部分文本右对齐[重复]

    这个问题在这里已经有答案了 我想知道是否有任何方法可以将选项文本的一部分向右对齐 在下面 您可以看到我有一个选择 左侧有一些名称 右侧有 垂直 我需要将 垂直 向右拉 有什么办法可以做到这一点吗

  • 使用 d3 在两个节点之间绘制多条边

    我一直在关注 Mike Bostock 的代码这个例子 http bl ocks org 1153292学习如何在 d3 中绘制有向图 并且想知道如何构建代码 以便可以在图中的两个节点之间添加多个边 例如 如果上例中的数据集定义为 var

  • TypeError：req.checkBody 不是包含 bodyparser 和expressvalidator 模块的函数

    我收到错误 req checkBody 不是一个函数 我认为我已经包含了express validator和body parser 这是我的代码 var express require express var bodyParser requ

  • VideoJs 在 Firefox 中的 Flash 回退问题

    我尝试将 videoJs 添加到我的网站来播放 MP4 文件 所有这些在 Chrome 中都能完美运行 但当我转到 Firefox 不支持 MP4 文件 时 Flash 播放器停留在黑屏上 按钮不执行任何操作 简单的问题 为什么 我不明白

  • 有没有办法离线将多个 Plotly HTML 文件合并/嵌入到一个页面/HTML 文件中？

    我正在尝试将多个图表合并成一个 HTML 报告来发送 问题是我真的不认为子图是最好的主意 因为图表相对不相关 不同的 X Y 轴 我所需要做的只是将图表附加到 1 个 HTML 文件中 有一个指南解释了如何使用绘图 URL 来完成此操作 但

  • font-face 声明中还需要 eot、ttf 和 svg 吗？

    到目前为止 我一直使用 Paul Irish 的防弹字体语法 http www paulirish com 2009 bulletproof font face implementation syntax 但我只是在寻找对 woff 和 w

  • 解析 Angular2 中的 xml 以在视图中呈现

    我是否需要解析 xml 以从 xml 获取数据以在 html 中呈现 我目前正在使用获取本地 xml 文件http get请求并在控制台日志中显示 xml 文件中的所有信息 我认为它只是在读取它 问题是如何在angular2中将xml转换为

  • 使用 CSS 过渡动画 max-height

    我想创建一个仅由类名驱动的展开 折叠动画 javascript 用于切换类名 我正在上一堂课max height 4em overflow hidden 和另一个max height 255em 我也尝试过这个值none 根本没有动画 这个

  • 如何使用 JavaScript 或 jQuery 获取 html 元素的比例值？

    我想知道如何获得元素的比例值 我努力了 element css webkit transform 返回matrix scaleX 0 0 scaleY 0 0 有没有办法得到scaleX and scaleY only 找出文档和元素之间的

  • -moz-变换 z-index 错误？

    In 这个测试用例 http jsfiddle net MZ7PX 没有 moz transform rotate 31deg 黄色框是可见的 它应该是可见的 但是如果我添加这个 尽管有一个黄色框是不可见的z index of 999 Wh

  • 有没有办法在不托管网站的情况下呈现网站并共享它？

    我正在为一个项目创建一个 repl it 网站 问题是我的老师要求不要发布该网站 这意味着我无法使用 repl it 来托管它 我想知道是否有任何方法可以制作可以通过 Google Chrome 查看的网站副本 而无需连接到主机 我有所有的

  • 如何暂时停止标题属性显示工具提示？

    我在右键单击时显示了一个弹出 div 我知道这会破坏预期的功能 但 Google 文档会这样做 所以为什么不呢 但是 我在弹出窗口上显示的元素有一个 标题 属性集 该属性集出现在我的分区 我仍然希望工具提示能够工作 但当弹出窗口出现时就不行

随机推荐

  • 编写代码常用快捷键

    编写代码常用快捷键 shift 或 逐个选中字符 ctrl 或 逐词移动光标 ctrl shift 或 逐词选中字符 常用 Home键 将光标移动到行开头 End键 将光标移动到到行结尾 常用 配合shift 或 Shift Home 从光

  • 华为云，站在数字化背后

    一场新的中国数字化战斗 正在被缓缓拉开帷幕 作者 裴一多 出品 产业家 如果说最近的讨论热点是什么 那无疑是互联网云 在数字化进入纵深的当下 一种市面上的观点是互联网的云业务由于盈利等问题 正在成为 被抛弃 的一方 互联网公司开始重新回归T

  • Spyder入门使用教程

    Spyder入门使用教程 Spyder汉化 Spyder汉化博客 创建项目 首先介绍Spyder布局 主要分上面的功能栏和下方的三个区块 点击创建新的项目 选择项目存放的目录 输入项目名 完成项目创建 创建新的文件 按Ctrl S 保存文件

  • Docker 资源汇总

    Docker 资源汇总 转载来源 http codecloud net docker resource 6090 html Menu Main Resources Books Websites Documents Archives Comm

  • Anaconda配置

    Anaconda配置 创建环境 conda create n 环境名 python 3 8 移除环境 conda remove n 环境名 all 查看所有环境 conda env list 激活环境 conda activate 环境名

  • 华为OD机试 - 组装最大可靠性设备（Java ）

    题目描述 一个设备由N种类型元器件组成 每种类型元器件只需要一个 类型type编号从0 N 1 每个元器件均有可靠性属性reliability 可靠性越高的器件其价格price越贵 而设备的可靠性由组成设备的所有器件中可靠性最低的器件决定

  • wxwidgets编写多线程程序--wxThread

    细节描述 线程基本上来说是应用程序中一条单独执行的路径 线程有时被称为轻量级进程 但线程与进程的根本不同之处在于不同进程存储空间是相互独立的 而同一进程里的所有线程共享同一地址空间 尽管这使得它更容易共享几个线程间的普通数据 但这也使得它有

  • 企业微信群：机器人实现定时提醒功能

    如果每天都需要 或者经常需要提醒企业微信群里面的人做某一件事情的话 靠人力去实现比较费力 而且偶尔忘记 正好 企业微信群有一个机器人 正可以实现这一功能 1 首先 在企业微信群 添加一个机器人 2 根据企业微信机器人的配置说明 编写程序 这

  • NOSuchKeys: com.aliyun.oss.OSSException: The specified key does not exist.

    出现这个原因就是在指定位置没有找到你想要获取的文件 1 检查你的文件名是否正确 2 你存文件是否带了文件夹 如果带了文件夹 检查文件夹是否正确 本文仅作为笔记

  • List集合的加减操作

    文章目录 一 对List本身有改变 二 对List本身无改变 参考资料 一 对List本身有改变 概述 List1 addAll List2 List1与List2两个集合相加 返回boolean值 原有List1值有变化 List2不变

  • 1-9 人机交互的角度

    操作系统的人机交互部分 OS改善人机界面 为用户使用计算机提供良好的环境 人机交互设备包括传统的终端设备和新型的模式识别设备 OS的人机交互部分用于控制有关设备运行和理解执行设备传来的命令 人机交互功能是决定计算机系统友善性的重要因素 是当

  • 机器学习算法GBDT的面试要点总结-上篇

    1 简介 gbdt全称梯度提升决策树 在传统机器学习算法里面是对真实分布拟合的最好的几种算法之一 在前几年深度学习还没有大行其道之前 gbdt在各种竞赛是大放异彩 原因大概有几个 一是效果确实挺不错 二是即可以用于分类也可以用于回归 三是可

  • "无法找到“XXX.exe”的调试信息，或者调试信息不匹配

    今天调试一C 程序 按下F5 老是弹出一对话框显示信息 debugging information for myproject exe cannot be found or does not match No symbols loaded

  • ros_control学习

    前言 ROS中提供了丰富的机器人应用 SLAM 导航 MoveIt 但是你可能一直有一个疑问 这些功能包到底应该怎么样用到我们的机器人上 也就是说在应用和实际机器人或者机器人仿真器之间 缺少一个连接两者的东西 ros control就是RO

  • MySQL之数据类型

    目录 一 MySQL数据类型分类 二 数值类型 1 整数类型 2 bit类型 3 小数类型 三 字符串类型 1 char 2 varchar 3 char和varchar比较 四 日期和时间类型 五 enum和set 一 MySQL数据类型

  • C#短信接口开发经验及具体开发实现

    一 配置文件app config

  • Unicode编码小结

    Unicode编码 一 ASCLL码 ASCII American Standard Code for Information Interchange 美国信息交换标准代码 是基于拉丁字母的一套电脑编码系统 主要用于显示现代英语和其他西欧语

  • Flutter 扫描插件开发qrscan

    首先在pubspec yaml中集成 dependencies qrscan 0 2 17 在androd清单文件中加入以下权限

  • Ubuntu安装X11

    Qt实现linux无边框界面需要用到Xlib 安装X11命令如下 sudo apt get install libx11 dev libxext dev libxtst dev libxrender dev libxmu dev libxm

  • align-content 设置多行下的子元素排列方式 代码和图片展示

    align content 适用于 换行 多行 的情况下 单行无效 可以设置上对齐 居中拉伸和平均分配剩余空间等属性值 属性值 flex start 默认值 在侧轴头部开始排列 flex end 在侧轴尾部开始排列 center 在侧轴中间

热门标签