相关疑难解决方法(0)

考虑flex容器的主轴和横轴:

                                                                                                                       ^{资料来源:W3C}

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

• justify-content

要沿横轴对齐flex项,有三个属性:

• align-content
• align-items
• align-self

在上图中,主轴是水平的,横轴是垂直的.这些是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可以方便地来回切换.

那么为什么横轴有两个额外的对齐属性呢？

为什么align-content并且align-items合并为主轴的一个属性？

为什么主轴没有justify-self属性？

这些属性有用的场景:

• 将flex项放在flex容器的角落
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 制作一组flex项目align-right(justify-content: flex-end)但是让第一个项目对齐left(justify-self: flex-start)

  考虑带有一组导航项和徽标的标题部分.随着justify-self徽标可以左对齐,而导航项目保持最右边,整个事物平滑地调整("弯曲")到不同的屏幕尺寸.

• 在一排三个柔性物品中,将中间物品粘贴到容器的中心(justify-content: center)并将相邻的物品对齐到容器边缘(justify-self: flex-start …

我在父div中有三个div,它们使用以下方式间隔开:

display: flex;
justify-content: space-between;

但是,父div有一个:afteron,它使得三个div不会出现在父div的边缘.有没有办法让flexbox忽略:before和:after？

codepen.io

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 300px;
  }
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

假设我有一个用户列表,每个用户都附加了一些号码.每个用户都列出如下:

<span><a href="/user/Niet">Niet</a> &rArr; 2</span>

它们的风格都是:

.userlist>span {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid currentColor;
}

这是一个实际的例子:

好吧,这看起来很好,用户列表可以长得很长,所以紧凑在这里很重要.我的问题是,右边缘是非常不一致的,所以我想知道是否有任何方法可以改善这一点.

当然,我的第一个想法是在跨度上设置固定宽度.但是,用户名宽度不是完全可预测的.你可以打电话iiiii给某人打电话WWWWW但是因为这不是monospace字体,你会得到"iiiii"和"WWWWW",那里的宽度非常明显不同.所以"最大宽度"基本上是最宽的允许字符,即W乘以最大用户名长度.我们试试吧......

EW.我不妨使用一个<ul>如果这是我将得到的结果.接下来的想法可能是让display:table宽度在列之间保持一致,同时仍然保持动态并且 - 假设大多数人都有合理的用户名(*咳嗽*......哦,嘿,这就是你如何逃避Markdown ......呵呵...... .) - 但它确实往往会留下很多空的空间.

所以我目前的想法是某种合理的对齐.这对文本很有效,对吧？但是,唉,text-align: justify确实在这种情况下完全错误,可能是因为要素之间没有空格.

我最后的尝试是使用flexbox,我已经在网站的新设计中使用了一些效果.让我们看看它display: flex; flex-wrap: wrap;在容器和flex: 1 0 auto;元素上的外观......

嗯,这看起来不太糟糕.不太糟糕

......嗯.很近.我真正喜欢的是最后一行元素不会被拉伸到最终.没关系,最后一行有三个或四个,但两个看起来有点傻,只有一个填满整个宽度,看起来很荒谬.

所以我想这整个小冒险归结为一个简单的问题:

我如何实现类似于对齐的行为,其中元素间隔使用容器的整个宽度,除了在它们应该使用它们的自然宽度的最后一行？

要完成这个小故事,感谢@ Michael_B的回答,这就是我如何实现解决方案:

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

结果如下:

美丽.