How Do I Align Icons From The Start Of A Line To The End Of A Line Which Is Evenly Distributed Horizontally?

How can I have the icon display from the beginning of the line to the end of the line and and have it evenly distributed? The icons should be evenly distributed and an icon should

Solution 1:

You cannot do that because the flexbox computes the size of its children. Your icons aren't the children, they are in the children (in the :before pseudo-element). What you can quickly do though, is to trick it and remove the line on the last child ;) Else, you'll have to review your DOM I think.

Using the :last-child selector, you can also hack the width of the last element or anything you'll like to improve the design on the end of the line!

.steps {
            width: 100%;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            align-items: stretch;
        }

        .stepsdiv {
            line-height: 3em;
            display: flex;
            justify-content: space-between;
            flex: 11 auto;
            align-items: stretch;
        }

        .steps.complete-step {
            border-bottom: 4px solid #95CA3E;
        }

        .steps.incomplete-step {
            border-bottom: 4px solid #0369B3;
        }

        .steps.complete-step:last-child {
            border-bottom: none;
        }

        .steps.incomplete-step:last-child {
            border-bottom: none;
        }

        .stepsdiv:after {
            content: "\00a0\00a0";
        }

        .stepsdiv:before {
            position: relative;
            bottom: -2.5em;
            float: none;
            line-height: 1em;
        }

        .steps.complete-step:before {
            font-family: 'FontAwesome';
            content: "\f111";
            color: #95CA3E;
            background-color: #95CA3E;
            height: 1.2em;
            width: 1.2em;
            border-radius: 1.2em;
        }

        .steps.incomplete-step:before {
            font-family: 'FontAwesome';
            content: "\f192";
            font-size: 1.5em;
            bottom: -1.6em;
        }

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"rel="stylesheet"/><divclass="steps"><divclass="complete-step"></div><divclass="complete-step"></div><divclass="incomplete-step"></div><divclass="incomplete-step"></div><divclass="incomplete-step"></div><divclass="incomplete-step"></div><divclass="incomplete-step"></div></div>

Solution 2:

To avoid a line at the end is easily done use the :not() selector, combined with :last-child, where all but the last child will get a line

.steps.complete-step:not(:last-child) {
  border-bottom: 4px solid #95CA3E;
}

When it comes to the line shining through, as the pseudo are a part of the items, its border will be beneath it. You can either move the pseudo outside, using e.g. a negative margin, and then resize the items so they match the space between, or simply give the incomplete pseudo a background color, as I did in below sample.

Stack snippet

.steps {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: stretch;
}

.stepsdiv {
  line-height: 3em;
  display: flex;
  justify-content: space-between;
  flex: 11 auto;
  align-items: stretch;
}

.steps.complete-step:not(:last-child) {       /*  changed  */border-bottom: 4px solid #95CA3E;
}

.steps.incomplete-step:not(:last-child) {     /*  changed  */border-bottom: 4px solid #0369B3;
}

.stepsdiv:after {
  content: "\00a0\00a0";
}

.stepsdiv:before {
  position: relative;
  bottom: -2.5em;
  float: none;
  line-height: 1em;
}

.steps.complete-step:before {
  font-family: 'FontAwesome';
  content: "\f111";
  color: #95CA3E;
  background-color: #95CA3E;
  height: 1.2em;
  width: 1.2em;
  border-radius: 1.2em;
}

.steps.incomplete-step:before {
  font-family: 'FontAwesome';
  content: "\f192";
  background-color: white;                     /*  added  */font-size: 1.5em;
  bottom: -1.6em;
}

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"rel="stylesheet" /><divclass="steps"><divclass="complete-step"></div><divclass="complete-step"></div><divclass="incomplete-step"></div><divclass="incomplete-step"></div><divclass="incomplete-step"></div><divclass="incomplete-step"></div><divclass="incomplete-step"></div></div>