在CSS Flexbox中,为什么没有“ justify-items”和“ justify-self”属性?

css CSS

Stafan神无前端

2020-03-17

考虑伸缩容器的主轴和横轴:

在此处输入图片说明                                                                                                                                                    资料来源:W3C

要沿主轴对齐弹性项目,有一个属性:

要沿交叉轴对齐弹性项目,需要三个属性:

在上图中,主轴是水平的,而横轴是垂直的。这些是flex容器的默认方向。

但是,这些方向可以轻松地与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可以轻松地来回切换。

那么,为什么十字轴具有两个附加的对齐属性?

Why are align-content and align-items consolidated into one property for the main axis?

Why does the main axis not get a justify-self property?


Scenarios where these properties would be useful:

  • placing a flex item in the corner of the flex container
    #box3 { align-self: flex-end; justify-self: flex-end; }

  • making a group of flex items align-right (justify-content: flex-end) but have the first item align left (justify-self: flex-start)

    Consider a header section with a group of nav items and a logo. With justify-self the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly ("flexes") to different screen sizes.

  • in a row of three flex items, affix the middle item to the center of the container (justify-content: center) and align the adjacent items to the container edges (justify-self: flex-start and justify-self: flex-end).

    Note that values space-around and space-between on justify-content 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>

jsFiddle version


As of this writing, there is no mention of justify-self or justify-items in the flexbox spec.

However, in the CSS Box Alignment Module, which is the W3C's unfinished proposal to establish a common set of alignment properties for use across all box models, there is this:

在此处输入图片说明                                                                                                                                                    Source: W3C

You'll notice that justify-self and justify-items are being considered... but not for flexbox.


I'll end by reiterating the main question:

Why are there no "justify-items" and "justify-self" properties?

第1891篇《在CSS Flexbox中,为什么没有“ justify-items”和“ justify-self”属性?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android