如何从flexbox中的所有包装行中删除左右边距（不包含n-child或js） [英] How to remove left and right margins from all wrapped rows in flexbox (without nth-child or js)

问题描述

我正在寻找一种很好的方法来删除每行的每个第一个和最后一个项目的左右边距，而不使用:: nth-child或JavaScript。如果这是不可能的，那么我猜下一个最好的方法是在主要的Flexbox元素上设置负的左/右边距，但我不太确定使用宽度：100％。基本上我想要的是在这个flexbox的左侧和右侧没有蓝色。

编辑：我会有在这里提供一个解决我自己的问题。我把 > b
$ b

HTML：

 < div id =main> 
< div>< span> div 1< / span>< / div> 
< div>< span> div 2< / span>< / div> 
< div>< span> div 3< / span>< / div> 
< div>< span> div 4< / span>< / div> 
< div>< span> div 5< / span>< / div> 
< div>< span> div 6< / span>< / div> 
< div>< span> div 7< / span>< / div> 
< div>< span> div 8< / span>< / div> 
< div>< span> div 9< / span>< / div> 
< div>< span> div 10< / span>< / div> 
< div>< span> div 11< / span>< / div> 
< / div> 
  

CSS：

  #main {
 margin-right：40px; 
 display：-ms-flexbox; 
 display：flex; 
 -ms-flex-pack：start; 
 justify-content：flex-start; 
 -ms-flex-wrap：wrap; 
 flex-wrap：wrap; 
宽度：100％; 
 background-color：lightblue; 
} 
 #main div {
 box-sizing：border-box; 
 display：-ms-flexbox; 
 display：flex; 
 -ms-flex：0 0 33.3％; 
 flex：0 0 33.3％; 
 border：5px透明; 
} 
 #main div> span {
 display：block; 
宽度：100％; 
 min-height：50px; 
 background-color：#eaeaea; 
 
 $ / code $ / pre 
 
解决方案
可以在每一行的首位或末位上设置柔性盒包裹而不会出现问题。这是如何修复边距，以获得div包裹，而不会错位每行的第一个或最后一个。 
 
 
  #main {
 padding：8px; 
 / * ...其他flex css ... * / 
} 
 #main div :: first-line {
 margin-left：0px; 
 / * ...其他flex css ... * / 
} 
 #main div {
 margin-left：16px; 
 margin-bottom：16px; 
 / * ...其他flex css ... * / 
} 
  
 
I'm looking for a good way to remove the left and right margins from each first and last item in each row without using ::nth-child or JavaScript. If that's not possible then I guess the next best way would be to set negative left/right margins on the main flexbox element, but I'm not quite sure the best way to do it with a flexbox that is width: 100%. Basically what I want is for there to be no blue color on the left and right of this flexbox.


EDIT: I'm gonna have to provide a solution to my own question here. I put together something that works using a wrapper element with overflow: hidden and the flexbox is set to width: calc(100% + 5px). Turns out Internet Explorer doesn't support box-sizing: border-box in flexboxes, but there's a workaround that I found here.

jsFiddle



HTML:
<div id="main">
    <div><span>div 1</span></div>
    <div><span>div 2</span></div>
    <div><span>div 3</span></div>
    <div><span>div 4</span></div>
    <div><span>div 5</span></div>
    <div><span>div 6</span></div>
    <div><span>div 7</span></div>
    <div><span>div 8</span></div>
    <div><span>div 9</span></div>
    <div><span>div 10</span></div>
    <div><span>div 11</span></div>
</div>
CSS:
#main {
    margin-right: 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    background-color: lightblue;
}
#main div {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 33.3%;
    flex: 0 0 33.3%;
    border: 5px solid transparent;
}
#main div > span {
    display: block;
    width: 100%;
    min-height: 50px;
    background-color: #eaeaea;
}

解决方案
Just in case, ppl already able to set the flex box to wrap but having issue on margin of first or last in each row. This is how to fix the margin to get div wrapped without misplaced the first or the last in each row.
#main {
  padding: 8px;
  /* ... other flex css ... */
}
#main div::first-line {
  margin-left: 0px;
  /* ... other flex css ... */
}
#main div {
  margin-left: 16px;
  margin-bottom: 16px;
  /* ... other flex css ... */
}


                        
这篇关于如何从flexbox中的所有包装行中删除左右边距（不包含n-child或js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！