在相等的空间分布上添加弹性项目之间的分界线 [英] Add dividing line between flex items with equal space distribution

问题描述

我有一个列表，其中有自动宽度的不同的项目（在我的情况下没有固定的宽度）。我使用 justify-content：之间的空格，因为我的第一个项目必须从容器的开始处开始，最后是最后一个项目。

以上所有的工作都很好，但每当我尝试在这些列表项之间添加一行时，问题就开始出现。我无法确定有多少像素或％我必须定位这些线。有没有办法动态定位不同的列表项之间的行？

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

这是我的：
$ b

这就是我试图达到的目标
$ b $

这里是我现在的代码

<预类= ; $ {code> html {box-sizing：border-box;}。容器{max-width：70％;} margin-right：auto; margin-left：auto;背景：蓝色; padding-top：20px; padding-bottom：20px;}。Flex {display：flex; flex-flow：排行;证明内容：空间之间; list-style：none;保证金：0; padding：0;}。Flex-item {background：red; position：relative;}。Flex-item：after {content：;位置：绝对;背景：白色;宽度：1px; height：40px;顶部：50％;变换：平移Y（-50％）;}

<预类= 片段码-HTML语言HTML的prettyprint-越权> < 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>

不改变标记，但至少你必须把 li 的内容换成 span 在这里：
$ b

1. 使 .flex-item 也是一个 flexbox ，将文本放置在 span （现在会有红色背景）和分隔符 ：在元素之后




2. 应用 flex-grow 和 flex-shrink 为1并且 flex-basis 为 auto Flex-item 。




3. flex：0 到最后 Flex-item 和 margin-auto 到：在之后也有助于提高效果。
   见下面：

   
   
   

   <预类=片断-code-css lang-css prettyprint-override> html {box-sizing：border-box;}。Container {max-width：70％; margin-right：auto; margin-left：auto;背景：蓝色; padding-top：20px; padding-bottom：20px;}。Flex {display：flex;证明内容：空间之间; list-style：none;保证金：0; padding：0;}。Flex-item {display：flex;证明内容：空间之间; align-items：center; flex-item span {background：red;}。Flex-item：not（：last-child）：after {content：;边框：1px纯白色; height：40px;余量：汽车;} Flex的资料：最后一子{挠曲：0;}

   <预类= 片段码-HTML语言HTML的prettyprint-越权 > < div class =Container> < ul class =Flex> < li class =Flex-item> <跨度>&的Lorem LT; /跨度> < /锂> < li class =Flex-item> <跨度> consectetur< /跨度> < /锂> < li class =Flex-item> <跨度>前庭< /跨度> < /锂> < li class =Flex-item> <跨度> NEC< /跨度> < /锂> < li class =Flex-item> <跨度> condimentum< /跨度> < /锂> < / div>

   
   

   I have a list with different items which have auto widths (no fixed width can be given in my case). I use justify-content: space-between because my first item has to start at the beginning of the container and my last item at the end.

   All of the above works fine, but whenever I try to add a line between these list items, the problems start to emerge. I have no way to determine how many px or % I have to position these lines. Is there any way to 'dynamically' position the lines between the different list-items or not?

   The html we are using is not editable as it is rendered by the CMS we are using.

   This is what I have:

   This is what I try to achieve

   Here is the code I currently have

   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>

   解决方案

   You can make it work by using a nested flexboxes - I understand you can't change the markup, but at least you have to wrap the contents of the li into a span like I have here:

   1. Make .flex-item also a flexbox with the text in a span (this would have the red background now) and the separator as an :after element

   2. Apply flex-grow and flex-shrink to 1 and flex-basis to auto for the Flex-item.

   3. The flex: 0 to the last Flex-item and margin-auto to the :after also contributes to the effect.

   A demo may explain it better - see below:

   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>

   这篇关于在相等的空间分布上添加弹性项目之间的分界线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！