在CSS Flexbox中,为什么没有“justify-items”和“justify-self”属性? [英] In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
问题描述
考虑flex容器的主轴和横轴:
资料来源:
flex-end
Flex项目包装到行尾。
中心
〜Flex项目包装在行中心。
$ c>
〜Flex项目是均匀分布的,第一个项目对齐到容器的一个边缘,最后一个项目对齐到对边。第一项和最后一项使用的边缘取决于
自动边距
使用
< hr>
其他有用的场景:
在角落放置弹性项目
问题的情况:
- corner
.box {align-self:flex-end; justify-self:flex-end; }
margin:auto
是 justify-content:center
and align-items:center
。
在Flex容器上的此代码:
.container {
justify-content:center;
align-items:center;
}
您可以在flex项目上使用:
.box56 {
margin:auto;
}
此选项在
当然,这种方法在语义方面没有什么好处。
您可以使用伪元素而不是实际的DOM元素。或者可以使用绝对定位。这里介绍了这三种方法:
解决方案#2:嵌套Flex容器)
truedata-babel =false> .container {display:flex ;}。box {flex:1;显示:flex; justify-content:center;}。box71> span {margin-right:auto; } .box73> span {margin-left:auto; } / * non-essential * /。box {align-items:center; border:1px solid #ccc;背景颜色:lightgreen; height:40px;}
< div class = > < div class =box box71>< span> 71 short< / span>< / div> < div class =box box72>< span> 72居中< / span>< / div> < div class =box box73>< span> 73 loooooooooooooooong< / span>< / div>< / div>
/ div>
以下是其工作原理:
- 顶层div (
.container
)是一个弹性容器。 - 每个子div(
.box $ c $ c>)现在是一个flex项目。
- 每个
.box
- 现在,项目正在占用行中的所有空间,并且宽度相等。
- 使每个项目成为一个(嵌套的)flex容器并添加
span =
justify-content:center
。 - 元素是一个居中的弯曲项。
- 使用flex
auto
$ c> auto 利润优先于justify-content
:
(信用卡: @oriol 代码, a href =http://stackoverflow.com/users/3183756/crl> @crl 标签)
< hr>
PLAYGROUND (包括上述所有示例的代码)
Consider the main axis and cross axis of a flex container:
Source: W3C
To align flex items along the main axis there is one property:
To align flex items along the cross axis there are three properties:
In the image above, the main axis is horizontal and the cross axis is vertical. These are the default directions of a flex container.
However, these directions can be easily interchanged with the
flex-direction
property./* 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;
(The cross axis is always perpendicular to the main axis.)
My point in describing how the axes' work is that there doesn't seem to be anything special about either direction. Main axis, cross axis, they're both equal in terms of importance and
flex-direction
makes it easy to switch back and forth.So why does the cross axis get two additional alignment properties?
Why are
align-content
andalign-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
andjustify-self: flex-end
).Note that values
space-around
andspace-between
onjustify-content
property will not keep the middle item centered in relation to 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 middle box will only be truly centered if adjacent boxes are equal width</p>
As of this writing, there is no mention of
justify-self
orjustify-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
andjustify-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?
解决方案Methods for Aligning Flex Items along the Main Axis
As stated in the question:
To align flex items along the main axis there is one property:
justify-content
To align flex items along the cross axis there are three properties:
align-content
,align-items
andalign-self
.The question then asks:
Why are there no
justify-items
andjustify-self
properties?One answer may be: Because they're not necessary.
The flexbox specification provides two methods for aligning flex items along the main axis:
- The
justify-content
keyword property, and auto
margins
justify-content
The
justify-content
property aligns flex items along the main axis of the flex container.It is applied to the flex container but only affects flex items.
There are five alignment options:
flex-start
~ Flex items are packed toward the start of the line.flex-end
~ Flex items are packed toward the end of the line.center
~ Flex items are packed toward the center of the line.space-between
~ Flex items are evenly spaced, with the first item aligned to one edge of the container and the last item aligned to the opposite edge. The edges used by the first and last items depends onflex-direction
and writing mode (ltr
orrtl
).space-around
~ Same asspace-between
except with half-size spaces on both ends.
Auto Margins
With
auto
margins, flex items can be centered, spaced away or packed into sub-groups.Unlike
justify-content
, which is applied to the flex container,auto
margins go on flex items.
Align group of flex items to the right, but first item to the left
Scenario from the question:
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.
Other useful scenarios:
Place a flex item in the corner
Scenario from the question:
- placing a flex item in a corner
.box { align-self: flex-end; justify-self: flex-end; }
Center a flex item vertically and horizontally
margin: auto
is an alternative tojustify-content: center
andalign-items: center
.Instead of this code on the flex container:
.container { justify-content: center; align-items: center; }
You can use this on the flex item:
.box56 { margin: auto; }
This alternative is useful when centering a flex item that overflows the container.
Center a flex item, and center a second flex item between the first and the edge
A flex container aligns flex items by distributing free space.
Hence, in order to create equal balance, so that a middle item can be centered in the container with a single item alongside, a counterbalance must be introduced.
In the examples below, invisible third flex items (boxes 61 & 68) are introduced to balance out the "real" items (box 63 & 66).
Of course, this method is nothing great in terms of semantics.
Alternatively, you can use a pseudo-element instead of an actual DOM element. Or you can use absolute positioning. All three methods are covered here: Absolute positioning in flexbox
NOTE: The examples above will only work – in terms of true centering – when the outermost items are equal height/width. When flex items are different lengths, see next example.
Center a flex item when adjacent items vary in size
Scenario from the question:
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
andjustify-self: flex-end
).Note that values
space-around
andspace-between
onjustify-content
property will not keep the middle item centered in relation to the container if the adjacent items have different widths (see demo).
As noted, unless all flex items are of equal width or height (depending on
flex-direction
), the middle item cannot be truly centered. This problem makes a strong case for ajustify-self
property (designed to handle the task, of course).#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>The middle box will be truly centered only if adjacent boxes are equal width.</p>
Here are two methods for solving this problem:
Solution #1: Absolute Positioning
The flexbox spec allows for absolute positioning of flex items. This allows for the middle item to be perfectly centered regardless of the size of its siblings.
Just keep in mind that, like all absolutely positioned elements, the items are removed from the document flow. This means they don't take up space in the container and can overlap their siblings.
In the examples below, the middle item is centered with absolute positioning and the outer items remain in-flow. But the same layout can be achieved in reverse fashion: Center the middle item with
justify-content: center
and absolutely position the outer items.Solution #2: Nested Flex Containers (no absolute positioning)
.container { display: flex; } .box { flex: 1; display: flex; justify-content: center; } .box71 > span { margin-right: auto; } .box73 > span { margin-left: auto; } /* non-essential */ .box { align-items: center; border: 1px solid #ccc; background-color: lightgreen; height: 40px; }
<div class="container"> <div class="box box71"><span>71 short</span></div> <div class="box box72"><span>72 centered</span></div> <div class="box box73"><span>73 loooooooooooooooong</span></div> </div>
Here's how it works:
- The top-level div (
.container
) is a flex container. - Each child div (
.box
) is now a flex item. - Each
.box
item is givenflex: 1
in order to distribute container space equally. - Now the items are consuming all space in the row and are equal width.
- Make each item a (nested) flex container and add
justify-content: center
. - Now each
span
element is a centered flex item. - Use flex
auto
margins to shift the outerspan
s left and right.
This works because, according to the spec,
auto
margins take precedence overjustify-content
:8.1. Aligning with
auto
marginsPrior to alignment via
justify-content
andalign-self
, any positive free space is distributed to auto margins in that dimension.
justify-content: space-same (concept)
Going back to
justify-content
for a minute, here's an idea for one more option.space-same
~ A hybrid ofspace-between
andspace-around
. Flex items are evenly spaced (likespace-between
), except instead of half-size spaces on both ends (likespace-around
), there are full-size spaces on both ends.
This layout can be achieved with
::before
and::after
pseudo-elements on the flex container.(credit: @oriol for the code, and @crl for the label)
PLAYGROUND (includes code for all examples above)
这篇关于在CSS Flexbox中,为什么没有“justify-items”和“justify-self”属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!