how properly to align 3 divs as circles in one line?-CodePudding

Trying to make a legend like block and struggling with alignment, need some advice-correction:

.footertext {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between;
  width: 260px;
  margin-top: 30px;
  background: yellow;
}

.circlemarker {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin-right: 78px;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

.circlemarker p {
  padding-left: 20px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}

#accactive {
  background: #1698D1;
}
#accdisabled {
  background: #979797;
}
#accprivileged {
  background: #FF9563;
}

<div class="footertext">
  <div>
    <div class="circlemarker" id="accactive" ><p>Active</p></div>
  </div>
  <div>
    <div class="circlemarker" id="accdisabled"><p>Disabled</p></div>
  </div>
  <div>
    <div class="circlemarker" id="accprivileged"><p>Privileged</p></div>
  </div>
</div>

so its looks almost ok, because I add

margin-right: 78px;

but such kind of "hardcoded" value and if size will change it will not fit well, so how I can change css so its looks same but be independent from margin? Also it seems not centred vertically. p.S. Yellow background has been added just to show boundaries of parent

CodePudding user response：

.footertext {
  width: 260px;
  margin-top: 30px;
  background: yellow;
  padding: 1rem;
}

.wrapper{
    display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  justify-content: space-between;
}

.circlemarker-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.circlemarker {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

.circlemarker p {
  padding-left: 20px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}

#accactive {
  background: #1698D1;
}
#accdisabled {
  background: #979797;
}
#accprivileged {
  background: #FF9563;
}

<div class="footertext">
  <div class="wrapper">
    <div class="circlemarker-wrapper">
      <div class="circlemarker" id="accactive" ></div>
      Active
    </div>
 
   <div  class="circlemarker-wrapper">
        <div class="circlemarker" id="accdisabled"></div>
        Disabled
   </div>
   <div class="circlemarker-wrapper">
    <div class="circlemarker" id="accprivileged"></div>
    Privileged
   </div>
  </div>
</div>

Try this.

CodePudding user response：

Move the text outside the circlemarker to get the width of the flex items correct.
Make the footertext flex items be flexboxes themselves to get vertical centering.

.footertext {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between;
  width: 260px;
  margin-top: 30px;
  background: yellow;
}

.footertext > div {
  display: flex;
  align-items: center;
}


.circlemarker {
  height: 15px;
  width: 15px;
  display: inline-block;
  border-radius: 50%;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

span {
  font-size: 12px;
  line-height: 14px;
}

#accactive {
  background: #1698D1;
}
#accdisabled {
  background: #979797;
}
#accprivileged {
  background: #FF9563;
}

<div class="footertext">
  <div>
    <div class="circlemarker" id="accactive"></div><span>Active</span>
  </div>
  <div>
    <div class="circlemarker" id="accdisabled"></div><span>Disabled</span>
  </div>
  <div>
    <div class="circlemarker" id="accprivileged"></div><span>Privileged</span>
  </div>
</div>