【CSS面试题】Flex实现九宫格

考察知识:
flex布局 + 水平垂直居中的实现

初始效果

代码关键:给父盒子添加以下属性

      flex-wrap: wrap; /* 允许换行 */justify-content: space-around; /* 主轴对齐方式 */align-content: space-around; /* 多行在侧轴上的对齐方式 */

在这里插入图片描述

<!DOCTYPE html>
<html lang="zn-ch"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>flex九宫格</title></head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div></div></body><script></script><style lang="scss">.box {width: 400px;height: 400px;border: 1px solid red;display: flex; /*  */flex-wrap: wrap; /* 允许换行 */justify-content: space-around; /* 主轴对齐方式 */align-content: space-around; /* 多行在侧轴上的对齐方式 */.item {width: 100px;height: 100px;background-color: pink;border: 1px solid red;}}</style>
</html>

优化:每个小盒子的内容水平垂直居中

在这里插入图片描述

  <body><div class="box"><div class="item"><div class="pink"></div>item-name</div><div class="item"><div class="pink"></div>item-name</div><div class="item"><div class="pink"></div>item-name</div><div class="item"><div class="pink"></div>item-name</div><div class="item"><div class="pink"></div>item-name</div><div class="item"><div class="pink"></div>item-name</div><div class="item"><div class="pink"></div>item-name</div><div class="item"><div class="pink"></div>item-name</div><div class="item"><div class="pink"></div>item-name</div></div></body><script></script><style lang="scss">.box {width: 400px;height: 400px;border: 1px solid red;display: flex; /*  */flex-wrap: wrap; /* 允许换行 */justify-content: space-around; /* 主轴对齐方式 */align-content: space-around; /* 多行在侧轴上的对齐方式 */.item {width: 100px;height: 100px;background-color: skyblue;border: 1px solid red;display: flex;flex-wrap: wrap;justify-content: center;align-content: center;.pink {width: 50px;height: 50px;border-radius: 50%;background-color: pink;}}}</style>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go的切片删除

package mainimport "fmt"func main() {//定义一个切片var s []int//切片赋值s []int{1, 2, 3, 4, 5}//删除2元素&#xff0c;...表示将s[2:]的元素追加到s[:2]后面s append(s[:1], s[2:]...)//打印切片fmt.Println(s) }s[:1] 表示切片 s 中从索引 0 开始&#xff…

Java 自定義 List<T> 分頁工具

Java 自定義 List 分頁工具 PS: T可修改为对应的实体 rt com.google.common.collect.Lists;import java.util.Arrays; import java.util.Collections; import java.util.List;/*** ClassName: MyPageHelper* Descripution: List<T>分頁工具**/ public class MyPageHelp…

std::atomic类模板的学习(1)

1.引言 std::atomic是一个c的模板类&#xff0c;为了解决线程访问共享资源时出现数据竞争问题。atomic的翻译成中文的意思是原子的&#xff0c;这里指的就是原子操作的意思。什么是原子操作呢&#xff1f;看到一个代码示例讲的挺好的。 int value 0; void atomic_function() …

10BASE-T1S架构助力车载E/E领域,引领汽车产业迈向智能化新纪元!

汽车架构的发展 如今&#xff0c;汽车已不仅仅满足消费者的代步需求&#xff0c;而是向所谓的ACES&#xff08;Autonomous, Connected, Electrification, Shared Source&#xff09;方向发展&#xff0c;全自动驾驶和网联化将成为最终目标。由此带来的高算力和高数据吞吐量问题…

政安晨:【Keras机器学习实践要点】(二十八)—— 使用Reptile进行小样本学习

目录 介绍 定义超参数 准备数据 可视化数据集中的一些示例 建立模型 训练模型 可视化结果 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras机器学习实战 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处…

数据库练习

insert into employee(empno,ename,job,mgr,hiredate,sal,comm,deptno) values (1001,甘宁,文员,1013,2000-12-17,8000.00,NULL,20), (1002,黛绮丝,销售员,1006,2001-02-20,16000.00,3000.00,30), (1003,殷天正,销售员,1006,2001-02-22,12500.00,5000.00,30), (1004,刘备,经理,…

kimichat使用技巧:用语音对话聊天

kimichat之前是只能用文字聊天的&#xff0c;不过最近推出了语音新功能&#xff0c;也可以用语音畅快的对话聊天了。 这个功能目前支持手机app版本&#xff0c;所以首先要在手机上下载安装kimi智能助手。已经安装的&#xff0c;要点击检查更新&#xff0c;更新到最新的版本。 …

Ubuntu 20.04 设置开启 root 远程登录连接

Ubuntu默认不设置 root 帐户和密码 Ubuntu默认不设置 root 帐户和密码 Ubuntu默认不设置 root 帐户和密码 如有需要&#xff0c;可在设置中开启允许 root 用户登录。具体操作步骤如下&#xff1a; 操作步骤 1、首先使用普通用户登录 2、设置root密码 macw:~$ sudo passwd …

【Linux笔记】编mysql库

说明当前编译条件&#xff1a;使用cmake 进行编译<当前编译为Ubuntu PC 版本 在虚拟机上面使用> 一、 cmake 库 【 cmake version 3.16.3 】 二、 openssl 库 【 libopenssl-1.1.1K 】 三、mysql 库 【mysql-5.7.36 】 四、boost 库 【boost_1_59_0 】 一、安装cmake 1.1…

Llama2模型本地部署(Mac M1 16G)

环境准备 环境&#xff1a;Mac M1 16G、Conda Conda创建环境配置 使用Anaconda-Navigator创建python 3.8环境 切换到新建的conda环境&#xff1a; conda activate llama38 llama.cpp 找一个目录&#xff0c;下载llama.cpp git clone https://github.com/ggerganov/llama.…

读所罗门的密码笔记18_大宪章

1. 大宪章 1.1. 1215年会议开启了一个艰难的谈判过程&#xff0c;充满了紧张和对权力与道德权威的争夺 1.1.1. 这部宪章会赋予各方一系列的权力&#xff0c;对国王的自由裁量权进行制衡 1.2. 《大宪章》还需要300多年的时间和多次迭代&#xff0c;才能成为财产权、公平税收、…

漫谈:C语言 C++ 迷惑的语句、分号、大括号

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 C语言设计得很麻拐。 初学者经…

博客永久链接与计数

概述 工欲善其事&#xff0c;必先利其器。 对自己的博客不好用不满意很久了&#xff0c;但是这几年太懒。想趁着放假弄一下吧&#xff0c;发现几年没动&#xff0c;版本升级后很多东西变了&#xff0c;折腾了一下午效果不太理想。先记录一下。 问题 博客链接中有中文&#x…

2024软考系统架构师-案例题分享2(带答案)

索引 试题一. 质量属性试题二. UML图试题三. 系统可靠性试题四. 数据库设计试题五. Web系统架构设计试题一. 质量属性 试题一(25分)阅读以下关于软件架构设计的叙述,在答题纸上回答问题 1~3。 【说明】某软件公司为某品牌手机厂商开发一套手机应用程序集成开发环境,以提高开…

STM32 DCMI 的带宽与性能介绍

1. 引言 随着市场对更高图像质量的需求不断增加&#xff0c;成像技术持续发展&#xff0c;各种新兴技术&#xff08;例如3D、计算、运动和红外线&#xff09;的不断涌现。如今的成像应用对高质量、易用性、能耗效率、高集成度、快速上市和成本效益提出了全面要求。为了满足这些…

【算法一则】做算法学数据结构 - 简化路径 - 【栈】

目录 题目栈代码题解 题目 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 ‘/’ 开头&#xff09;&#xff0c;请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中&#xff0c;一个点&#xff08;.&#xff09;表…

Cesium 无人机航线规划

鉴于大疆司空平台和大疆无人机app高度绑定&#xff0c;导致很多东西没办法定制化。 从去年的时候就打算仿大疆开发一套完整的平台&#xff0c;包括无人机app以及仿司空2的管理平台&#xff0c;集航线规划、任务派发、实时图像、无人机管理等功能的平台。 当前阶段主要实现了&…

突破编程_前端_SVG(circle 圆形)

1 circle 元素的基本属性和用法 SVG 的 <circle> 元素用于在SVG文档中绘制圆形。它具有几个基本属性&#xff0c;允许定义圆形的大小、位置、填充颜色和边框样式。以下是 <circle> 元素的基本属性及其详细解释&#xff1a; 1.1 cx 和 cy 描述&#xff1a;这两个…

软件可靠性测试

1.软件可靠性测试概述 软件可靠性测试由可靠性目标的确定、运行剖面的开发、测试用例的设计、测试实施、测试结果的分析等主要活动组成。 软件可靠性测试还必须考虑对软件开发进度和成本的影响&#xff0c;最好是在受控的自动测试环境下&#xff0c;由专业测试机构完成。 软件可…

记录一次Java中使用P12证书访问https,nginx返回403的问题

目录 1、先使用浏览器导入证书访问&#xff0c;测试证书和密钥是否正确2、编写初始java代码3、结果响应 403 Forbidden4、解决方案 1、先使用浏览器导入证书访问&#xff0c;测试证书和密钥是否正确 成功返回&#xff0c;说明p12证书和密钥是没问题的。 2、编写初始java代码 …