learningbyexample learningbyexample - 6 months ago 12
HTML Question

how do I change the color in 'justify-content: space-between;' CSS

How do I add a color to space-between so that '

background-color:lightblue;
' remains the same rather then leaving a huge blank in my menu bar after the LINK.

NO BLANK_SPACES


#main {
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
/* Safari */
-webkit-justify-content: space-between;
/* Safari 6.1+ */
display: flex;
justify-content: space-between;
}
#main div {
width: 70px;
height: 70px;
}

<div id="main">
<div style="background-color:lightblue;">LINK</div>
<div style="background-color:lightblue;">LINK</div>
<div style="background-color:lightblue;">LINK</div>
<div style="background-color:lightblue;">LINK</div>
</div>




Answer

for a plain-color and a simple way, box-shadow could help:

#main {
  width: 400px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  /* Safari */
  -webkit-justify-content: space-between;
  /* Safari 6.1+ */
  display: flex;
  justify-content: space-between; 
  overflow:hidden;
}
#main div {
  width: 70px;
  height: 70px;
}
<div id="main">
  <div style="background-color:lightblue;box-shadow:-40px 0 lightblue, 40px 0 lightblue">LINK</div>
  <div style="background-color:lightblue;box-shadow:-40px 0 lightblue, 40px 0 lightblue">LINK</div>
  <div style="background-color:lightblue;box-shadow:-40px 0 lightblue, 40px 0 lightblue">LINK</div>
  <div style="background-color:lightblue;box-shadow:-40px 0 lightblue, 40px 0 lightblue">LINK</div>
</div>