flex多根线轴对齐方式

淡淡的烟草味﹌ 2023-10-17 19:08 6阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Document</title>  
<style>  
\*\{  
padding:0;  
margin:0;  
\}  
/\*flex里的项目是不脱离文档流的\*/  
\#hd\{  
width:80%;  
border:4px solid orangered;  
height:700px;  
margin:20 auto;  
/\*指定容器里的项目为弹性布局\*/  
display: flex;  
/\*放不下的项目换行\*/  
flex-wrap:wrap;  
/\*与交叉轴起点对齐\*/  
/\*align-content:flex-start;\*/  
/\*与交叉轴终点对齐\*/  
/\*align-content:flex-end;\*/  
/\*与交叉轴中点对齐\*/  
/\*align-content:center;\*/  
/\*与交叉轴的两端对齐，轴线之间平均分布\*/  
/\*align-content:space-between;\*/  
/\*每根轴线两端的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍\*/  
align-content:space-around;  
/\*默认值，轴线占满整个交叉轴\*/  
/\*align-items: stretch;\*/  
\}  
\#hd>div\{  
width:240px;  
height:200px;  
background:dodgerblue;  
border:1px solid purple;  
font-size:30px;  
color:\#fff;  
text-align:center;  
  
\}  
</style>  
</head>  
<body>  
  
  
<div id="hd">  
<div>1</div>  
<div>2</div>  
<div>3</div>  
<div>4</div>  
<div>5</div>  
<div>6</div>  
<div>7</div>  
<div>8</div>  
</div>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 flex多根线轴对齐方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</

淡淡的烟草味﹌/ 2023年10月17日 19:08/ 0 赞/ 7 阅读

相关 flex三个对齐属性的记忆方式

今天在群里聊天有人说 flex的那几个居中属性好难记，时不时都要尝试一下，或者查看一下文档，现在我把我自己的记忆方式分享一下。。。 1. flex的居中主要是通过这三个属性

末蓝、/ 2023年08月17日 16:53/ 0 赞/ 38 阅读

相关 Flex布局子元素对齐方式

display -------------------- display: flex | inline-flex ; `display`确定是否启用flexb

我就是我/ 2023年07月07日 12:53/ 0 赞/ 25 阅读

相关 flex盒子布局 - 通过主轴和侧轴学习对齐方式

CSS Flexible Box Layout 就是css的弹性盒子布局，简称flex布局，相对于box布局来说，功能更多一些，使用起来也相对灵活。先了解一下方向轴的概念

旧城等待，/ 2023年06月25日 03:24/ 0 赞/ 48 阅读

相关 css 对齐方式

图片垂直对齐（vertical-align）默认: baseline – 一行内文本的下方。 middle – 一行内小写字母的高度的1/2 设置各对象的vert

迈不过友情╰/ 2022年12月12日 04:57/ 0 赞/ 225 阅读

相关 flex布局，均分可换行，左对齐

实现效果 ![在这里插入图片描述][20200806115528879.png] 思路：放大于一排数量的空标签占位。上图其实是这样的，关键点将空标签高度设0，避免

╰半橙微兮°/ 2022年11月24日 14:08/ 0 赞/ 347 阅读

相关 Canvas 文字对齐方式

Canvas 文字对齐方式常用的画文字的方法 `public void drawText (String text, float x, float y, Paint

ゝ一世哀愁。/ 2022年11月18日 01:18/ 0 赞/ 256 阅读

相关 flex布局——最后一行左对齐的实现方式(css功能实现)

在学习了`css3`之后，经常会用到的布局就是`flex`布局了。比如要实现下图的这种布局： ![在这里插入图片描述][watermark_type_ZmFuZ3po

超、凢脫俗/ 2022年09月01日 14:51/ 0 赞/ 1208 阅读

相关内存对齐方式

一般我们编程的时候short s=2,int i=4,char c=’a’在内存中是如何对齐的呢？在32位系统中： ![这里写图片描述][SouthEast] 在

野性酷女/ 2022年06月09日 09:26/ 0 赞/ 288 阅读

相关 css3 flex布局:最后一行靠边对齐的处理方式

flex布局对于css3中的经典布局：flex布局，沿主轴方向排列时，无论是两端对齐还是均分，如果最后一行内容不够的时候，都会出现以下的形式。 ![在这里插入图片描述

我不是女神ヾ/ 2021年07月25日 20:19/ 0 赞/ 606 阅读