Question

我有一个列表，其中包含具有自动宽度的不同项目（在我的情况下，不能给出固定宽度）。我使用justify-content: space-between因为我的第一个项目必须从容器的开头开始，最后一个项目必须从最后一个开始。

所有上述工作都很好，但每当我尝试在这些列表项之间添加一行时，问题就会出现。我无法确定需要多少px或％来定位这些行。有没有办法“动态”定位不同列表项之间的行？

我们正在使用的html不可编辑，因为它是由我们正在使用的CMS呈现的。

这就是我所拥有的：

这是我试图实现的目标

这是我目前的代码

html {
    box-sizing: border-box;
}

.Container {
    max-width: 70%;
    margin-right: auto;
    margin-left: auto;
    background: blue;
    padding-top: 20px;
    padding-bottom: 20px;
}

.Flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}

.Flex-item {
    background: red;
    position: relative;
}

.Flex-item:after {
    content: "";
    position: absolute;
    background: white;
    width: 1px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
}

<div class="Container">
    <ul class="Flex">
         <li class="Flex-item">Lorem</li>
         <li class="Flex-item">consectetur</li>
         <li class="Flex-item">vestibulum</li>
         <li class="Flex-item">nec</li>
         <li class="Flex-item">condimentum</li>
    </ul>
</div>

Answer 1

我在我正在进行的项目中使用此解决方案。

它在灵活容器上设置justify-content: space-between;，在所有儿童身上设置左边框的儿童flex: 1 1 auto;除外。

我修改了您的示例CSS，以便您可以查看。我不确定你是否会对孩子们有背景色，所以我只是用线高来获得更大的边框。

＆＃13;

html {
    box-sizing: border-box;
}

.Container {
    max-width: 70%;
    margin-right: auto;
    margin-left: auto;
    background: blue;
    padding-top: 20px;
    padding-bottom: 20px;
}

.Flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}

.Flex-item {
    flex: 1 1 auto;
    background: red;
    position: relative;
    text-align: center;
    line-height: 40px;
}

.Flex-item + .Flex-item {
    border-left: solid 1px white;
}

＆＃13;

<div class="Container">
    <ul class="Flex">
        <li class="Flex-item">Lorem</li>
        <li class="Flex-item">consectetur</li>
        <li class="Flex-item">vestibulum</li>
        <li class="Flex-item">nec</li>
        <li class="Flex-item">condimentum</li>
    </ul>
</div>

＆＃13;

不修改HTML。

Answer 2

您可以使其正常工作使用嵌套 flexbox es - 我知道您无法更改标记，但至少您必须换行将li的内容转换为span，就像我在这里：

将.flex-item改为flexbox，其中包含span中的文字（现在为红色背景）和分隔符 :after元素
将flex-grow和flex-shrink应用于flex-basis以及auto Flex-item。
flex: 0到最后Flex-item和margin-auto到:after也会产生影响。

演示可以更好地解释它 - 见下文：

html {
  box-sizing: border-box;
}
.Container {
  max-width: 70%;
  margin-right: auto;
  margin-left: auto;
  background: blue;
  padding-top: 20px;
  padding-bottom: 20px;
}
.Flex {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
.Flex-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1 1 auto;
}
.Flex-item span {
  background: red;
}
.Flex-item:not(:last-child):after {
  content: "";
  border: 1px solid white;
  height: 40px;
  margin: auto;
}
.Flex-item:last-child {
  flex: 0;
}

<div class="Container">
  <ul class="Flex">
    <li class="Flex-item">
      <span>Lorem</span>
    </li>
    <li class="Flex-item">
      <span>consectetur</span>
    </li>
    <li class="Flex-item">
      <span>vestibulum</span>
    </li>
    <li class="Flex-item">
      <span>nec</span>
    </li>
    <li class="Flex-item">
      <span>condimentum</span>
    </li>
  </ul>
</div>

Answer 3

而不是:after尝试使用一组<li class="separator"></li>

.Container {
  max-width: 70%;
  margin: 0 auto;
  background: blue;
}

.Flex {
  display: flex;
  justify-content: space-between;
  list-style: none; padding: 20px 0; margin:0;
}

.Flex-item {
  background: red;
}

.separator {
  background: white; width: 1px;
}

<div class="Container">
  <ul class="Flex">
    <li class="Flex-item">Lorem</li>
    <li class="separator" aria-hidden="true" role="presentation"></li>
    <li class="Flex-item">consectetur</li>
    <li class="separator" aria-hidden="true" role="presentation"></li>
    <li class="Flex-item">vestibulum</li>
    <li class="separator" aria-hidden="true" role="presentation"></li>
    <li class="Flex-item">nec</li>
    <li class="separator" aria-hidden="true" role="presentation"></li>
    <li class="Flex-item">condimentum</li>
  </ul>
</div>

P.S：是的，我最初尝试使用display: list-item :after伪但是naah。

Answer 4

我认为使用flexbox实现这一目标的唯一方法是将文本包装在一个新元素中，就像@Kukkuz在another answer中所做的那样。

如果没有额外的包装，您仍然可以获得等间距的分隔符，但红色背景不限于文本的长度。

下面是一个示例：

无法更改HTML。
不需要伪元素。
无需绝对定位。

如果不需要文本的背景颜色，则将其删除，这应该就是您所需要的。

.Flex {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.Flex-item {
  flex: 1 1 auto;
  background: red;
}
.Flex-item {
  text-align: center;
}
.Flex-item:first-child {
  text-align: left;
}
.Flex-item:last-child {
  text-align: right;
}
.Flex-item + .Flex-item {
  border-left: 1px solid white;
}
.Container {
  max-width: 70%;
  margin-right: auto;
  margin-left: auto;
  background: blue;
  padding-top: 20px;
  padding-bottom: 20px;
}

<div class="Container">
  <ul class="Flex">
    <li class="Flex-item">Lorem</li>
    <li class="Flex-item">consectetur</li>
    <li class="Flex-item">vestibulum</li>
    <li class="Flex-item">nec</li>
    <li class="Flex-item">condimentum</li>
  </ul>
</div>

如果您可以在文本周围添加span，这样您就可以将红色背景限制为文本的长度，那么您已全部设置：

.Flex {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.Flex-item {
  flex: 1 1 auto;
  display: inline-flex;
  justify-content: center;
}
.Flex-item span {
    background-color: red;
}
.Flex-item:first-child span {
  margin-right: auto;
}
.Flex-item:last-child span {
  margin-left: auto;
}
.Flex-item + .Flex-item {
  border-left: 1px solid white;
}
.Container {
  max-width: 70%;
  margin-right: auto;
  margin-left: auto;
  background: blue;
  padding-top: 20px;
  padding-bottom: 20px;
}

<div class="Container">
  <ul class="Flex">
    <li class="Flex-item"><span>Lorem</span></li>
    <li class="Flex-item"><span>consectetur</span></li>
    <li class="Flex-item"><span>vestibulum</span></li>
    <li class="Flex-item"><span>nec</span></li>
    <li class="Flex-item"><span>condimentum</span></li>
  </ul>
</div>

Answer 5

试试这个

＆＃13;

html {
    box-sizing: border-box;
}

.Container {
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
    background: blue;
    padding-top: 11px;
    padding-bottom: 50px;
}

.Flex {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    float: left;
}

.Flex-item {
    position: relative;
    float: left;
    padding: 5px 10px;
    border-right:1px solid #fff;
}
.Flex-item:last-child{border-right:none;}

.Flex-item >div{
  margin:0 5px;
  background:red;
  padding:5px;
}

＆＃13;

<div class="Container">
    <ul class="Flex">
         <li class="Flex-item"><div>
         Lorem
         </div></li>
         <li class="Flex-item"><div>
         consectetur
         </div></li>
         <li class="Flex-item"><div>
         vestibulum
         </div></li>
         <li class="Flex-item"><div>
         nec
         </div></li>
         <li class="Flex-item"><div>
         condimentum
         </div></li>
    </ul>
</div>

＆＃13;

Answer 6

如果你覆盖flex，你可能会在没有任何额外标记的情况下获得关闭的内容。

它涉及伪，order＆amp; css3选择器（罚款flex）。

http://codepen.io/gc-nomade/pen/BpzYWP

＆＃13;

body {
  margin:0;
}

.Flex, .Flex-item {
  display:flex;
  padding:0.5em 0;
  margin:0;
}
.Flex-item  {
  flex:1;/*spray them evenly*/
  
}
.Flex-item:before,
.Flex-item:after {/* add pseudos to fill extra space */
  content:'';
  flex:1;/* thats where it takes room not use by the text */
  margin:-1em 0;/* grow them taller */
  border-right:solid 1px white;
}
.Flex-item:first-child:before
{
  order:2;/* put both pseudo after text*/ 
  flex:.5;/* shrink that one can be .75 to .25 */
  border:none; /* remove the border useless for the show */
}

.Flex-item:last-child:after {
  order:-1;/* put both pseudos before text */
  flex:0.5;/* shrink that one can be .75 to .25 */
}
.Flex-item:first-child + .Flex-item:before ,
.Flex-item:nth-last-child(1):after{
  border:none; /* remove the border useless for the show */
}
body, :after, :before {
  background:tomato;/* pseudo will hide li background */
}
li {
  background:turquoise;
}

/* give some space around the text */
.Flex-item:first-child {
  padding-left:1em;
}
.Flex-item:last-child {
  padding-right:1em;
}
.Flex-item:before {
  border:none;/* we do not need those after all */
  margin-right:1em;
}
.Flex-item:after {
  margin-left:1em;
}
.Flex-item:first-child:before {
  margin:-1em 0;
}.Flex-item:last-child:after {
  margin:-1em 0;
}

＆＃13;

<div class="Container">
    <ul class="Flex">
         <li class="Flex-item">Lorem</li>
         <li class="Flex-item">consectetur</li>
         <li class="Flex-item">vestibulum</li>
         <li class="Flex-item">nec</li>
         <li class="Flex-item">condimentum</li>      
    </ul>
</div>

＆＃13;

在具有相等空间分布的弹性项之间添加分界线

6 个答案: