CODEWITHSUNDEEP
htmlcssflexbox
ciekals11
ciekals11

Reputation: 2155

Divide line between elements but with first item aligned to left

I'm trying to make divide line between elements but i need first element to be set to left.

So far i have

.contact {
  display: flex;
  justify-content: space-between;
  background-color: black;
}

.contact .item {
  flex: 1 1 auto;
  color: white;
  padding: 10px 0;
  text-align: center;
}

.contact .item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .3);
}
<div class="contact">
  <div class="item">
    <span>test<span>
  </div>
  <div class="item">
    <span>test<span>
  </div>
  <div class="item">
    <span>test<span>
  </div>
  <div class="item">
    <span>test<span>
  </div>
</div>

But i need it to look like this:
enter image description here
How can i achieve this?

Upvotes: 2

Views: 59

Answers (1)

Temani Afif
Temani Afif

Reputation: 272994

Make both last and first element taking half the width of middle ones and change text-align:

.contact {
  display: flex;
  background-color: black;
}

.contact .item {
  flex-grow: 2;
  flex-basis:0;
  color: white;
  padding: 10px 0;
  text-align: center;
}

.contact .item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .3);
}

.contact .item:last-child {
  flex-grow:1;
  text-align:right;
}

.contact .item:first-child {
  flex-grow:1;
  text-align:left;
}
<div class="contact">
  <div class="item">
    <span>test</span>
  </div>
  <div class="item">
    <span>test</span>
  </div>
  <div class="item">
    <span>test</span>
  </div>
  <div class="item">
    <span>test</span>
  </div>
</div>

Upvotes: 4

Related Questions