2

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:bikes@chainline.ca"</a>bikes@chainline.ca</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?

NaOH
  • 449
  • 1
  • 10
  • 23
  • Take a look at this: https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties?rq=1 – ManUtopiK Sep 05 '19 at 15:53

2 Answers2

3

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:bikes@chainline.ca"</a>bikes@chainline.ca</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>
user9408899
  • 4,202
  • 3
  • 19
  • 32
1

Figured this out using auto margins on most elements.

NaOH
  • 449
  • 1
  • 10
  • 23