【CSS】align-items和justify-content傻傻分不清

已于 2024-08-15 23:22:34 修改
阅读量140 收藏
点赞数 2
文章标签： css 前端
于 2024-08-13 23:42:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45718102/article/details/141176578
版权

#最近也分享过垂直居中的几种方式，其实就提到了align-items和justify-content。在开发中我也常混淆哪个是纵轴的哪个是横轴的，但因为他俩总是成对出现，直接俩center完事。但是吧，偶尔也是想起来又查一查……

今天看到一篇蛮有意思的博客《为什么 CSS flex 布局中没有 `justify-items` 和 `justify-self`?》，也帮助我成功记忆住了。虽然主旨不是帮我们区分横纵，但是看完这个，再结合这图，一下也就清晰了。

以后，想起来align-items有items证明这个方向是可以有n个轴的，遂指向交叉轴；justify-content是对应一个content，故为主轴。完美~

Tiffany_Ho
关注
align-content、justify-content、align-items三个属性的作用和效果
qq_44329870的博客
11-20 2万+
一.align-content属性 作用：设置同一列子元素在Y轴的对齐方式 属性值 描述 flex-start 排列在当前列的最上方 flex-end 排列在当前列的最下方 center 排列在当前列的中间位置 space-between 间距相等排列，上下不留白 space-around 间距相等排列，上下留白等于间距的一半 二.justify-content属性 作用：设置同一行子元素在X轴的对齐方式 属性值 描述 flex-start 排列在当前行的
Flex弹性盒布局-flex-direction、flex-wrap、justify-content、align-items
m0_64460142的博客
04-12 2329
Flex弹性盒布局 flex弹性布局：之前我们学过浮动和定位设置px值才能进行页面排版，flex会比较方便。它比较弹性。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cro
CSS align-items和justify-content的关系
a1346629347的博客
08-11 644
align-items和justify-content都是用来决定弹性容器内项目的位置 align-items是对项目在容器竖向进行操作的 justify-content是对项目在容器横向进行操作
什么是弹性（display: flex）布局 ？
weixin_41044151的博客
02-25 11万+
display:flex 意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 它可以用于以下四个方面： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将
justify-content和align-items的区别
weixin_46969393的博客
08-12 564
justify-content和align-items的区别
justify/align-content/items使用区别
qq_53895518的博客
03-29 1041
这三个CSS属性都是Flex布局或Grid布局中的重要属性，它们分别用于控制容器内子元素的主轴对齐方式、交叉轴线对齐方式以及单行或多行子元素在交叉轴上的对齐方式。注意：一般都是 justify-content 搭配 align-items使用。content对应的是整体，items对应的。justify对应主轴。所在的那个周边区域。
justify-content与justify-items与常用属性
.
07-19 4287
css常用属性
第二节 弹性盒子（ justify-content属性、align-items属性、flex-direction属性、flex-wrap属性）
Fiki515的博客
03-23 1万+
一、弹性盒子的定义 弹性盒子（ Flexible Box 或 flexbox）：CSS3的一种新布局模式。 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 二、 justify-content属性：决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端； row-reverse：主轴为水平方向，起点在右端； column：主轴为垂直方向，起点在上沿； column-reverse：主轴为垂直方向，起点在下沿。 <!D.
justify-content和align-items实现居中登陆界面
qq_39397845的博客
05-27 3607
1、注意事项用justify-content和align-items实现居中时：1、父元素要设置具体的width和height。2、display为flex。3、justify-content与align-items配合使用。2、实现效果图及代码&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;...
display: flex text-align align-items justify-content 居中测试过程
morning1216的博客
07-12 2084
display: flex text-align align-items justify-content 居中测试过程 刚刚接触HTML CSS，想记录一下我自学中遇到的很小白的问题。 此次练习的目的是将下图中2222水平竖直居中在浅灰色方块中。 遇到的问题是使用display: flex之后，text-align居中失效。使用了align-items justify-content之后虽然效果达到了，但是很好奇为什么text-align居中失效，经过几次测试，本小白大概搞懂了。我个人来说，各种概念看过之后
text-align:justify实现文本两端对齐 兼容IE
09-03
`text-align: justify` 是 CSS 中的一个属性，用于设置元素内的文本对齐方式。这个属性的 `justify` 值可以使得文本在两端都均匀分布，就像在书籍和杂志排版中常见的情况那样。通常，`text-align: left` 会使文本左...
justify-content和align-items
06-06
justify-content和align-items是CSS中用于控制flexbox布局的属性。 justify-content用于控制flex容器中flex项目在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-between、space-around和space-...
flex布局：justify-content、aign-content、align-items
cotexarm7的专栏
08-20 5539
1.justify-content：弹性盒子在主轴方向上的排列方式，例子 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;test&lt;/title&gt; &lt;style type
记忆css中justify-content 和 align-items的对齐作用
Rance_King的博客
07-22 1468
justify-content是在水平轴上进行对齐； align-items是在竖直方向上进行对齐； 简单记忆方法，justify-content这个单词更长，在横向上延展——
flex布局justify-content属性和align-items，align-self属性
左岸
11-17 4万+
justify-content（在父元素设置） 设置弹性盒子元素在主轴（横轴）的对齐方式。取值：justify-content: flex-start | flex-end | center | space-between | space-around;flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐，后面的元素接着第一个元素进行排列。flex-end: 弹性
CSS3弹性布局内容对齐（justify-content）属性使用详解
热门推荐
陈小峰（iefreer）的专栏
03-01 15万+
内容调整（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐。
justify-content与align-items解析
include的博客
08-25 6847
justify-content justify-content是flex布局中的一个属性，用来调整container中的items布局 flex-start (default): 每个item从起点开始依次排布 flex-end: 每个item从尾部开始依次向起点排布 center: items沿中心排布 space-between: items从左到右依次排布，第一个item在起点，最后...
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
最新发布
S筱潇S四维Smile
09-11 421
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
HTML、CSS实现树状图
p_s_p的博客
09-09 802
【代码】HTML、CSS实现树状图。
css怎么修改el-menu-item的文字放在右边
07-14
要将el-menu-item的文字放置在右边，可以使用Flexbox布局和一些CSS样式来实现。以下是一个示例： ```css .el-menu-item { display: flex; justify-content: space-between; align-items: center; } .el-menu-item span { margin-right: 10px; /* 可根据需要调整文字与其他元素之间的间距 */ } ``` 在上述示例中，我们将el-menu-item的display属性设置为flex，这样它的子元素会按照水平方向排列。通过使用justify-content: space-between，我们可以将文字放在右边，并保持其他元素在左侧。另外，align-items: center可以确保文字垂直居中对齐。 需要注意的是，上述示例假设el-menu-item中的文字是包裹在一个span元素中的。如果你的情况不同，可以相应地调整选择器来选中正确的元素。 记得将上述样式应用到你的项目中，并根据需要进行适当调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值