当前位置: 首页 > 知识库问答 >
问题:

对齐内容和对齐项之间的区别?[副本]

陆洛城
2023-03-14

我真的很难理解有什么区别?从我的研究来看,justify-content似乎可以...之间空格之间空格,而对齐项可以...伸展基线初始继承

此外,flex-startflex-endcenter这两个属性似乎是共享的。

使用其中一个比使用另一个有何不同/优势,还是仅仅是偏爱?我觉得他们都是方式相似,只是做同样的事情,有谁知道区别吗?谢谢!!

共有1个答案

郏经纬
2023-03-14

两者都设置内容的对齐方式。

(如果弯曲方向是行,则设置水平对齐/间距;如果弯曲方向是列,则设置垂直对齐/间距)

例如,如果flex-direction是行(默认值):

Flex-Start;左水平对齐子级

伸缩-结束;右水平对齐子项

居中;水平居中对齐儿童(太棒了!)

间隔;在整个宽度上水平均匀地分布子级

空格;在整个宽度上水平均匀地分布子级(但边缘要有空格

(如果弯曲方向是行,则设置垂直对齐;如果弯曲方向是列,则设置水平对齐)

例如,如果flex-direction是行(默认值):

Flex-Start;垂直对齐子级

弹性结束;垂直对齐子项

居中;垂直居中对齐儿童(太棒了!)

基线;垂直对齐子项,以便它们的基线对齐(实际上不起作用)

伸展;强制子容器高度(适用于列)

http://codepen.io/enxaneta/full/adlpwv/

这些应该被命名为:

flex-x:主轴对齐/间距

flex-y:副轴对齐

但是使用HTML,你永远不会有好东西。从来没有。

 类似资料:
  • 我发现CSS Flexbox属性中的和之间的差异非常令人困惑。我已经在网上看了几个小时的文档和几个例子,但我仍然不能完全掌握它。 更准确地说,对我来说,对齐项对我来说是完全有意义的,它的行为是完全清楚的。另一方面,一点也不清晰。特别是,我不明白为什么我们应该根据内容是一行还是多行使用两种不同的属性。 用外行的话来解释是什么?

  • 我已经阅读了网格的完整指南,但仍然对两组容器属性之间的差异感到困惑,即“”与“”。 我的困惑围绕着作者的说法,即“”集在那里是因为 有时网格的总大小可能小于网格容器的大小 我认为这两种情况都适用,而不仅仅是“”集合。 有人能解释一下吗?最好使用一些图形说明作为示例。

  • 如果flex容器有多行(when,flex-wrap:wrap),align-content属性定义容器中每一行的对齐方式。 Usage - align-content: flex-start | flex-end | center | space-between | space-around | stretch; 此属性接受以下值 - stretch - 内容中的线条将拉伸以填充剩余空间。 f

  • 我正在尝试对齐一个div内的项目,我读了一些问题,但仍然有这个疑问。 我目前拥有的: 代码是 null null 类别描述的不起作用:(我希望它位于块的最右侧。 将设置为显式长度不是一个选项,因为“类别描述”的内容是可变的。

  • 我尝试使用样式将Add to library向右对齐,但似乎不起作用。如何将对齐到Flex右侧。谁能帮忙吗? null null

  • 问题内容: 我有一个具有以下属性的flex容器(蓝色正方形): 因此,其子项(浅蓝色方块)如下所示排列它们自己。但是,我想从正常流程中添加另一个孩子(绿色正方形)并将其相对于其父对象放置。要将其定位在下面,如您所见,我最好编写类似bottom: 20px;和的内容margin: auto;。 我试着z-index无济于事。我应该如何处理?我应该使用另一个父元素吗? 问题答案: 以下是实现此布局的五