CODEWITHSUNDEEP
htmlcssflexbox
NaOH
NaOH

Reputation: 459

Group some items together with flex?

I have this HTML:

<div id="header">
  <span id="title">ChainLine Cycle</span>
  <span id="address">1139 Ellis St, Kelowna, BC<br>(250) 860-1968<br><a href="mailto:[email protected]"</a>[email protected]</a></span>
  <span class="brand">Bianchi</span>
  <span class="brand">Marin</span>
  <span class="brand">Transition</span>
  <span id="hours">Sun&ndash;Mon: Closed<br>Tue&ndash;Fri: 10am-5pm<br>Sat: 10am-3pm</span>
  <span id="social"><img src="img/fb.png"><img src="img/ig.png"><br><img src="img/pb.png"><img src="img/tw.png"></span>
</div>

And this CSS:

#header {width:100%;background:#000;color:#fff;display:inline-flex;justify-content:space-between;}
#header span {padding:5px;margin:auto 0;}
#title {font-family:'Oleo Script',cursive;font-size:4em;}
#address {font-weight:bold;}
#hours {text-align:right;}
#social {font-size:0;right:0;}
#social img {padding:2.5px;}
.brand {font-size:3em;}

And I'm trying to have the leftmost two and rightmost two <span>'s grouped together on the left and right, with the then middle three <span>'s distributed evenly in the remaining space. I can't figure out how to do this with flex... I've also tried tables, floating them, positioning them absolutely, putting <div>'s around the elements I'm trying to group, and nothing seems to work.

Live example is here: http://www.chainline.ca/2019/

How can I get these elements to group together how I want?

Upvotes: 2

Views: 487

Answers (2)

user9408899
user9408899

Reputation: 4540

You can wrap those elements with divs, and then set justify-content property to space-between to achieve that layout. Like this:

#header {
  display: flex;
  justify-content: space-between;
}

#header div {
  width: 100%;
}

#header div:nth-child(2) {
  display: flex;
  justify-content: space-between;
}

#header div:last-child {
  display: flex;
  justify-content: flex-end;
}
<div id="header">
  <div>
    <span id="title">ChainLine Cycle</span>
    <span id="address">1139 Ellis St, Kelowna, BC<br>(250) 860-1968<br><a href="mailto:[email protected]"</a>[email protected]</a></span>
  </div>
  <div>
    <span class="brand">Bianchi</span>
    <span class="brand">Marin</span>
    <span class="brand">Transition</span>
  </div>
  <div>
    <span id="hours">Sun&ndash;Mon: Closed<br>Tue&ndash;Fri: 10am-5pm<br>Sat: 10am-3pm</span>
    <span id="social"><img src="img/fb.png"><img src="img/ig.png"><br><img src="img/pb.png"><img src="img/tw.png"></span>
  </div>
</div>

Upvotes: 3

NaOH
NaOH

Reputation: 459

Figured this out using auto margins on most elements.

Upvotes: 1

Related Questions