如问题所述:
要沿主轴对齐弹性项目,有一个属性: justify-content
沿横轴对准柔性项目有三个属性:align-content,align-items
和align-self
。
然后问题问:
为什么没有justify-items
和justify-self
属性?
一个答案可能是:因为没有必要。
所述Flex@R_656_2419@的规范提供2点用于对准沿主轴弯曲的物品的方法:
该justify-content
属性使伸缩项沿伸缩容器的主轴对齐。
它应用于flex容器,但仅影响flex项目。
有五个对齐选项:
flex-start ?Flex项目包装在行的开头。
flex-end ?Flex项目包装在行尾。
center ?柔性物品被包装到行的中心。
space-between?柔性物品均匀间隔,第一个物品与容器的一个边缘对齐,最后一个物品与相对的边缘对齐。第一项和最后一项使用的边缘取决于flex-direction和写入模式(ltr或rtl)。
space-around?space-between除两端留半角空格外,其余均相同。
自动保证金 使用automargins,可以将弹性项目居中,隔开或打包成子组。
与justify-content应用于flex容器的方法不同,auto在flex项上使用边距。
它们通过消耗指定方向上的所有可用空间来工作。
将一组弹性项目向右对齐,但将第一项向左对齐 问题的场景:
考虑带有一组导航项和徽标的标题部分。随着 justify-self
标志可以左对齐,而资产净值的项目留最右边,并顺利整件事调整(“挠曲”),以不同的屏幕尺寸。
将弹性项目放在角落 问题的场景:
将弹性项目垂直和水平居中
margin: auto
是可替换的justify-content: center和align-items: center。
代替在flex容器上的此代码:
.container {
justify-content: center;
align-items: center;
}
您可以在flex项目上使用它:
.@R_656_2419@56 {
margin: auto;
}
当居中溢出容器的flex项目居中时,此替代方法很有用。
将弹性项目居中,将第二个弹性项目居中于第一个和边缘之间 flex容器通过分配可用空间来对齐flex项目。
因此,为了创建平衡,以便中间物品可以在容器中居中放置单个物品,必须引入平衡。
在下面的示例中,引入了不可见的第三柔性项目(框61和68)以平衡“真实”项目(框63和66)。
当然,就语义而言,此方法并不是什么好事。
另外,您可以使用伪元素代替实际的DOM元素。或者,您可以使用绝对定位。此处介绍了所有三种方法:居中对齐和底部对齐的弹性项目
注意:仅当最外层项目的高度/宽度相等时,以上示例才有效(就真正居中而言)。如果弹性商品的长度不同,请参见下一个示例。
当相邻项目的大小不同时,将弹性项目居中 问题的场景:
请注意,如果相邻项目的宽度不同,则value space-around
和space-betweenon justify-content
属性不会使中间项目相对于容器居中(请参见demo)。
如前所述,除非所有弹性项目的宽度或高度相等(取决于flex-direction),否则中间项目无法真正居中。这个问题为justify-self财产(当然是设计用来处理任务)提供了强有力的理由。
#container {
display: flex;
justify-content: space-between;
background-color: lightyellow;
}
.@R_656_2419@ {
height: 50px;
width: 75px;
background-color: springgreen;
}
.@R_656_2419@1 {
width: 100px;
}
.@R_656_2419@3 {
width: 200px;
}
#center {
text-align: center;
margin-bottom: 5px;
}
#center > span {
background-color: aqua;
padding: 2px;
}
<div id="center">
<span>TRUE CENTER</span>
</div>
<div id="container">
<div class="@R_656_2419@ @R_656_2419@1"></div>
<div class="@R_656_2419@ @R_656_2419@2"></div>
<div class="@R_656_2419@ @R_656_2419@3"></div>
</div>
<p>The middle @R_656_2419@ will be truly centered only if adjacent @R_656_2419@es are equal width.</p>
解决方案1:绝对定位
flex@R_656_2419@规范允许弹性项目的绝对定位。这使得中间项目可以完美地居中,而不考虑其同级大小。
请记住,与所有绝对定位的元素一样,这些项目也会从文档流中删除。这意味着它们不会占用容器中的空间,并且可以使它们的兄弟姐妹重叠。
在以下示例中,中间项目以绝对定位为中心,而外部项目保持流入。但是可以通过相反的方式实现相同的布局:将中间项目与justify-content: center外部项目居中对齐并对其进行绝对定位。
解决方案2:嵌套式Flex容器(无绝对定位)
.container {
display: flex;
}
.@R_656_2419@ {
flex: 1;
display: flex;
justify-content: center;
}
.@R_656_2419@71 > span { margin-right: auto; }
.@R_656_2419@73 > span { margin-left: auto; }
/* non-essential */
.@R_656_2419@ {
align-items: center;
border: 1px solid #ccc;
background-color: lightgreen;
height: 40px;
}
<div class="container">
<div class="@R_656_2419@ @R_656_2419@71"><span>71 short</span></div>
<div class="@R_656_2419@ @R_656_2419@72"><span>72 centered</span></div>
<div class="@R_656_2419@ @R_656_2419@73"><span>73 loooooooooooooooong</span></div>
</div>
运作方式如下:
但是justify-content
可以在这里工作,因为auto保证金始终是优先事项。从规格:
8.1。与auto 边距对齐
在通过justify-content
和对齐之前align-self
,任何正的自由空间都会分配给该维度中的自动边距。