考虑弹性容器的主轴和横轴:
Source: W3C
要沿主轴对齐弹性项,有一个属性:
要沿横轴对齐弹性项目,有三个属性:
在上图中,主轴是水平的,横轴是垂直的.这些是弹性容器的默认方向.
但是,这些方向可以很容易地与flex-direction
属性互换.
/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;
/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;
(横轴始终垂直于主轴.)
我在描述轴的工作原理时的观点是,两个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性上是相等的,flex-direction
使得来回切换变得容易.
So why does the cross axis get two additional alignment properties?个
Why are 100 and 101 consolidated into one property for the main axis?
Why does the main axis not get a 100 property?
这些属性有用的场景:
-
placing a flex item in the corner of the flex container
#box3 { align-self: flex-end; justify-self: flex-end; }
-
使一组弹性项目向右对齐(
justify-content: flex-end
),但使第一个项目向左对齐(justify-self: flex-start
)
Consider a header section with a group of nav items and a logo. With 100 the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly ("flexes") to different screen sizes.
- 在一排三个挠性物品中,将中间物品贴在容器(
justify-content: center
)的中心,并将相邻物品与容器边缘(justify-self: flex-start
和justify-self: flex-end
)对齐.
Note that values 100 and 101 on 102 property will not keep the middle item centered about the container if the adjacent items have different widths.
#container {
display: flex;
justify-content: space-between;
background-color: lightyellow;
}
.box {
height: 50px;
width: 75px;
background-color: springgreen;
}
.box1 {
width: 100px;
}
.box3 {
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="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>
在 compose 本文时,flexbox spec人中没有提到justify-self
或justify-items
.
然而,在CSS Box Alignment Module中,这是W3C尚未完成的建议,即建立一组通用的对齐属性,以供所有盒子模型使用,其中有以下内容:
Source: W3C
你会注意到justify-self
和justify-items
被考虑.but not for flexbox.
最后,我会重申主要问题:
为什么没有"对齐项"和"对齐self "属性?