content一起工作

content一起工作

关注
发信
关注(28)粉丝(399)

flex-wrap如何与align-self，align-items和align-content一起工作？

本文介绍了flex-wrap如何与align-self，align-items和align-content一起工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ align-self 在下面的代码中， align-self flex-wrap：nowrap 。 i.stack.imgur.com/AJHct.pngrel =noreferrer> flex-container {display：flex; flex-wrap：nowrap; align-content：flex-start;宽度：250px; height：250px; background-color：silver;} flex-item {flex：0 0 50px; height：50px; margin：5px; background-color：lightgreen;} flex-item：last-child {align-self：flex-end; background-color：crimson;} < flex-container> ; <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < flex-item>< / flex-item>< / flex-container> 但是当容器切换到 flex-wrap：wrap ， align-self 财产失败。 flex-container {display：flex; flex-wrap：wrap; align-content：flex-start;宽度：250px; height：250px; background-color：silver;} flex-item {flex：0 0 50px; height：50px; margin：5px; background-color：lightgreen;} flex-item：last-child {align-self：flex-end; background-color：crimson;} < flex-container> ; <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < flex-item>< / flex-item>< / flex-container> align-items ，为什么 align-items 在这里工作（禁用自动换行功能）： flex-container {display：flex; flex-wrap：wrap; align-items：flex-end; align-content：flex-start;宽度：250px; height：250px; background-color：silver;} flex-item {flex：0 0 50px; height：50px; margin：5px;背景颜色：lightgreen;} < flex-container> ; <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < flex-item>< / flex-item>< / flex-container> align-content flex-wrap：nowrap ， align-content 属性不会在这里垂直居中flex项目： flex-container {display：flex; flex-wrap：nowrap; align-content：center;宽度：250px; height：250px; background-color：silver;} flex-item {flex：0 0 50px; height：50px; margin：5px;背景颜色：lightgreen;} < flex-container> ; <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < flex-item>< / flex-item>< / flex-container> 但是奇怪的是，如果启用了wrap，并且省略了 align-content ，那么容器会在这些行之间创建更大的间隔： flex-container {display：flex; flex-wrap：wrap; / * align-content：center; * / width：250px; height：250px; background-color：silver;} flex-item {flex：0 0 50px; height：50px; margin：5px; background-color：lightgreen;} < flex-container> ; <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < flex-item>< / flex-item>< / flex-container> 和 align-self 可以再次使用。 $ b 提供了四个用于对齐flex项目的关键字属性： align-items align-self align-content justify-content 要理解这些属性的功能，了解Flex容器的结构。 第1部分：了解Flex容器的主轴和交叉轴 X和Y轴 在两个方向工作：x轴（水平）和y轴（垂直）。               ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 来源：      ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBS p;  资料来源： 一条曲线。 $ b flex-容器{display：flex; flex-direction：column; flex-wrap：nowrap; / *< - 允许单行弯曲容器* / width：250px; height：250px; background-color：silver;} flex-item {flex：0 0 50px;宽度：50px; margin：5px; background-color：lightgreen;} < flex-container> ; <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < flex-item>< / flex-item>< / flex-container> 多行Flex容器 $ b flex-wrap ：wrap 或者 wrap-reverse 建立一个多行flex容器，其中flex项目可以创建新行。 b 上面的图片有三条曲线。 $ b flex-container {display：柔性; flex-direction：column; flex-wrap：wrap; / *< - 允许多行柔性容器* / width：250px; height：250px; background-color：silver;} flex-item {flex：0 0 50px;宽度：50px; margin：5px;背景颜色：lightgreen;} < flex-container> ; <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < flex-item>< / flex-item>< / flex-container> 上面的图片有三条曲线。 / em> flex-container {display：flex ; flex-direction：row; flex-wrap：wrap; / *< - 允许多行柔性容器* / width：250px; height：250px; background-color：silver;} flex-item {flex：0 0 50px; height：50px; margin：5px; background-color：lightgreen;} < flex-container> ; <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < flex-item>< / flex-item>< / flex-container> 第3部分：关键字对齐属性 属性被分配给Main和Cross（不是X和Y）轴 $ b 虽然 flex-direction property控制flex项目布局的方向，有四个属性可以控制对齐和定位。这些是： align-items align-self align-content justify-content 被永久地分配给一个轴。 $ b justify-content 属性只能在主轴上使用。 三个 align - * 属性只能在交叉轴上使用。 假设这些属性固定在x和y轴上是一个常见的错误。例如， justify-content 总是水平的，而 align-items 总是垂直的。 然而，当 flex-direction 切换到列时，主轴变成y轴和 justify-content 垂直工作。 这篇文章的焦点是跨轴对齐。有关主轴对齐和 justify-content 属性的解释，请参阅此帖：           &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 源代码： 为什么 align-content 仅适用于多行柔性容器？ 在单行flex容器中，交叉大小为该行等于容器的交叉大小。这意味着线路和集装箱之间没有空闲的空间。因此， align-content 可以不起作用。 在例子1中，因为flex项目存在于单行容器中，所以 align-self 可以与 flex-wrap：nowrap 一起使用。因此，有一条柔性线，它匹配容器的高度。 flex-container {display：flex; flex-wrap：nowrap; align-content：flex-start;宽度：250px; height：250px; background-color：silver;} flex-item {flex：0 0 50px; height：50px; margin：5px; background-color：lightgreen;} flex-item：last-child {align-self：flex-end; background-color：crimson;} < flex-container> ; <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < flex-item>< / flex-item>< / flex-container> 例3的解释与例1相同。 data-console =truedata-babel =false> div class =snippet-code snippet-currently-hidden> flex-container {display：flex; flex-wrap：nowrap; align-items：flex-end; align-content：flex-start;宽度：250px; height：250px; background-color：silver;} flex-item {flex：0 0 50px; height：50px; margin：5px; background-color：lightgreen;} < flex-container> ; <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < flex-item>< / flex-item>< / flex-container> 例4的解释与例2相同。 data-console =truedata-babel =false> div class=\"snippet-code snippet-currently-hidden\">flex-container { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container> Example #5 is a single-line container. As such, the cross size of the flex line equals the cross size of the container, leaving no extra space between the two. Therefore, align-content, which aligns flex lines when there is extra space in the cross axis, is having no effect. flex-container { display: flex; flex-wrap: nowrap; align-content: center; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container> The initial setting for align-content is stretch. This means that if no other value is specified, the container will distribute available space evenly among flex lines. (A similar effect is created on the main axis when all flex items get flex: 1.) This distribution of space among lines can cause wide gaps between rows / columns. Less lines result in wider gaps. More lines result in smaller gaps, as each line gets a smaller share of the space. To resolve this problem switch from align-content: stretch to align-content: flex-start. This packs the lines together (see examples #2 and #4 above). Of course, this also eliminates any free space in the line, and align-items and align-self can no longer work. Here’s a related post: As explained in previous examples, with align-content: stretch, there can be extra space in the flex lines, which allows align-items and align-self to work. Any other value for align-content would pack the lines, eliminating extra space, and making align-items and align-self useless. flex-container { display: flex; flex-wrap: wrap; /* align-content: center; */ width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}flex-item:nth-child(even) { align-self: flex-end; background-color: crimson;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container> align-selfIn the following code, align-self works with flex-wrap: nowrap.flex-container { display: flex; flex-wrap: nowrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}flex-item:last-child { align-self: flex-end; background-color: crimson;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>But when the container is switched to flex-wrap: wrap, the align-self property fails.flex-container { display: flex; flex-wrap: wrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}flex-item:last-child { align-self: flex-end; background-color: crimson;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>align-itemsSimilarly, why does align-items work here (wrap disabled):flex-container { display: flex; flex-wrap: nowrap; align-items: flex-end; align-content: flex-start; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>...but not here (wrap enabled):flex-container { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>align-contentWith flex-wrap: nowrap, the align-content property will not vertically center flex items here:flex-container { display: flex; flex-wrap: nowrap; align-content: center; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>But then, strangely, if wrap is enabled and align-content is left out, the container creates wide gaps between rows here:flex-container { display: flex; flex-wrap: wrap; /* align-content: center; */ width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>And align-self works again.flex-container { display: flex; flex-wrap: wrap; /* align-content: center; */ width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}flex-item:nth-child(even) { align-self: flex-end; background-color: crimson;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container> How does flex-wrap work with align-self, align-items and align-content? 解决方案 Short AnswerAlthough the flex-wrap property seems pretty basic – it controls whether flex items can wrap – it actually has a wide-ranging impact on the entire flexbox layout.The flex-wrap property determines the type of flex container you will use.flex-wrap: nowrap creates a single-line flex containerflex-wrap: wrap and wrap-reverse create a multi-line flex containerThe align-items and align-self properties work in both single- and multi-line containers. However, they can only have an effect when there's free space in the cross axis of the flex line.The align-content property works only in multi-line containers. It is ignored in single-line containers.ExplanationThe flexbox specification provides four keyword properties for aligning flex items:align-itemsalign-selfalign-contentjustify-contentTo understand the functions of these properties it's important to first understand the structure of a flex container.Part 1: Understanding the Main Axis and Cross Axis of a Flex ContainerThe X and Y AxesA flex container works in two directions: x-axis (horizontal) and y-axis (vertical).                                                                                                                Source: WikipediaThe child elements of a flex container – known as "flex items" – can be aligned in either direction.This is flex alignment at its most fundamental level.The Main and Cross AxesOverlaying the x and y axes are, in flex layout, the main and cross axes.By default, the main axis is horizontal (x-axis), and the cross axis is vertical (y-axis). That's the initial setting, as defined by the flexbox specification.                                                                                                                Source: W3CHowever, unlike the x and y axes, which are fixed, the main and cross axes can switch directions.The flex-direction PropertyIn the image above, the main axis is horizontal and the cross axis is vertical. As mentioned earlier, that's an initial setting of a flex container.However, these directions can be easily switched with the flex-direction property. This property controls the direction of the main axis; it determines whether flex items align vertically or horizontally.From the spec: 5.1. Flex Flow Direction: the flex-direction property The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.There are four values for the flex-direction property:/* main axis is horizontal, cross axis is vertical */flex-direction: row; /* default */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.Part 2: Flex LinesWithin the container, flex items exist in a line, known as a "flex line".A flex line is a row or column, depending on flex-direction.A container can have one or more lines, depending on flex-wrap.Single-Line Flex Containerflex-wrap: nowrap establishes a single-line flex container, in which flex items are forced to stay in a single line (even if they overflow the container).The image above has one flex line.flex-container { display: flex; flex-direction: column; flex-wrap: nowrap; /* <-- allows single-line flex container */ width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; width: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>Multi-Line Flex Containerflex-wrap: wrap or wrap-reverse establishes a multi-line flex container, in which flex items can create new lines.The image above has three flex lines.flex-container { display: flex; flex-direction: column; flex-wrap: wrap; /* <-- allows multi-line flex container */ width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; width: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>The image above has three flex lines.flex-container { display: flex; flex-direction: row; flex-wrap: wrap; /* <-- allows multi-line flex container */ width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>Part 3: Keyword Alignment PropertiesProperties are Assigned to the Main and Cross (not X and Y) AxesWhile the flex-direction property controls the direction in which flex items are laid out, there are four properties that control alignment and positioning. These are:align-itemsalign-selfalign-contentjustify-contentEach one of these properties is permanently assigned to an axis.The justify-content property works only in the main axis.The three align-* properties work only in the cross axis.It's a common mistake to assume that these properties are fixed to the x and y axes. For example, justify-content is always horizontal, and align-items is always vertical.However, when flex-direction is switched to column, the main axis becomes the y-axis, and justify-content works vertically.The focus of this post is cross-axis alignment. For an explanation of main-axis alignment and the justify-content property, see this post:In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?DefinitionsThe flexbox specification provides three keyword properties for cross-axis alignment:align-itemsalign-selfalign-contentalign-items / align-selfThe align-items property aligns flex items along the cross axis of the flex line. It applies to flex containers.The align-self property is used to override align-items on individual flex items. It applies to flex items.Here's the definition from the spec: 8.3. Cross-axis Alignment: the align-items and align-self properties Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items. align-self allows this default alignment to be overridden for individual flex items.There are six possible values for align-items / align-self:flex-startflex-endcenterbaselinestretchauto (align-self only)(For a description of each value, click on the spec definition heading above.)The initial value of align-items is stretch, meaning flex items will expand the full available length of the container's cross axis.The initial value of align-self is auto, meaning it inherits the value of align-items.Below is an illustration of the effect of each value in a row-direction container.                                                                                                                source: W3Calign-contentThis property is slightly more complex than align-items and align-self.Here's the definition from the spec: 8.4. Packing Flex Lines: the align-content property The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.In contrast to align-items and align-self, which move flex items within their line, align-content moves flex lines within the container.There are the six possible values for align-content:flex-startflex-endcenterspace-betweenspace-aroundstretch(For a description of each value, click on the spec definition heading above.)Below is an illustration of the effect of each value in a row-direction container.                                                                                                                source: W3CWhy does align-content work only in multi-line flex containers?In a single-line flex container, the cross size of the line is equal to the cross size of the container. This means there is no free space between the line and the container. As a result, align-content can have no effect.Here's the relevant section from the spec: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.Part 4: Examples ExplainedIn Example #1, align-self works with flex-wrap: nowrap because the flex items exist in a single-line container. Therefore, there is one flex line and it matches the height of the container.flex-container { display: flex; flex-wrap: nowrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}flex-item:last-child { align-self: flex-end; background-color: crimson;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>In Example #2, align-self fails because it exists in a multi-line container (flex-wrap: wrap) and align-content is set to flex-start. This means that flex lines are packed tightly to the start of the cross axis, leaving no free space for align-self to work.flex-container { display: flex; flex-wrap: wrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}flex-item:last-child { align-self: flex-end; background-color: crimson;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>The explanation for Example #3 is the same as for Example #1.flex-container { display: flex; flex-wrap: nowrap; align-items: flex-end; align-content: flex-start; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>The explanation for Example #4 is the same as for Example #2.flex-container { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>Example #5 is a single-line container. As such, the cross size of the flex line equals the cross size of the container, leaving no extra space between the two. Therefore, align-content, which aligns flex lines when there is extra space in the cross axis, is having no effect.flex-container { display: flex; flex-wrap: nowrap; align-content: center; width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>The initial setting for align-content is stretch. This means that if no other value is specified, the container will distribute available space evenly among flex lines. (A similar effect is created on the main axis when all flex items get flex: 1.)This distribution of space among lines can cause wide gaps between rows / columns. Less lines result in wider gaps. More lines result in smaller gaps, as each line gets a smaller share of the space.To resolve this problem switch from align-content: stretch to align-content: flex-start. This packs the lines together (see examples #2 and #4 above). Of course, this also eliminates any free space in the line, and align-items and align-self can no longer work.Here's a related post: Remove space (gaps) between multiple lines of flex items when they wrapflex-container { display: flex; flex-wrap: wrap; /* align-content: center; */ width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container>As explained in previous examples, with align-content: stretch, there can be extra space in the flex lines, which allows align-items and align-self to work. Any other value for align-content would pack the lines, eliminating extra space, and making align-items and align-self useless.flex-container { display: flex; flex-wrap: wrap; /* align-content: center; */ width: 250px; height: 250px; background-color: silver;}flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen;}flex-item:nth-child(even) { align-self: flex-end; background-color: crimson;}<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item></flex-container> 这篇关于flex-wrap如何与align-self，align-items和align-content一起工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
08-01 10:56
Powered by LMLPHP ©2024 content一起工作 0.047368