What is the best way to align content left and right in a header while using flexbox?

Question

I'm struggling to find the right keywords to solve this.

Here is my code that works:

HTML

 <div class="windowTopBar">
   <span style="display: inline-block;"><b>System Properties</b></span>
   <span style="float: right;">[?][X]</span>
 </div>

CSS

 .windowTopBar {
   background: linear-gradient(90deg, #000080, #1084D0);
   color: white;
   height: 2em;
   min-height: 2em;
   align-items: center;
   margin: 0;
 }

This works and floats the "System Properties" to the left and the "what will be two img buttons" to the right.

If I put the span styles into classes, it stops working. Why?

If I put "display: flex;" into the parent div, it also stops working? Why? I really want to use display flex. I've been messing with this for quite a long time actually.

My favourite solution so far, was to do display: flex and justify-content: flex-end on the parent (while using two child divs instead of spans), but I couldn't figure out how to float the "System Properties" over to the left side.

I am trying to make it responsive, so I would appreciate if someone could help me understand what the bestpractice is and defintely help me understand why span style property works in html but not as a css class.

To be extra clear, if i do:

HTML

 <span class="test1">blah1</span>
 <span class="test1">blah2</span>

CSS

 .test1 {
   display: inline-block;
 }
 .test2 {
   float: right;
 }

It doesnt work. Help please! :) Forgive me if I'm asking too much. This is my first ever question, but I've been lurking for years.

I just found this, http://www.adam-bray.com/blog/107/simple-css-alignments-flexbox/ — agm1984, Dec 05 '16 at 04:44
possible guidance: http://stackoverflow.com/q/32551291/3597276 — Michael Benjamin, Dec 05 '16 at 04:48
that was helpful, thanks for posting it. i'm saving it to my secret bin :) — agm1984, Dec 05 '16 at 18:56

score 0 · Accepted Answer · answered Dec 05 '16 at 04:42

0

I would use justify-content: space-between:

.windowTopBar {
  display: flex;
  justify-content: space-between;
}

 <div class="windowTopBar">
   <span><b>System Properties</b></span>
   <span>[?][X]</span>
 </div>

answered Dec 05 '16 at 04:42

Robby Cornelissen

91,784
22
134
156

Thanks, I actually just found the same thing myself, doh. – agm1984 Dec 05 '16 at 04:43
1

I was having a hard time on Google because of all the old questions that were using crazy table methods and floating. flex space-between is a gem. I'll add the keyword to my post so someone can hopefully find it one day. – agm1984 Dec 05 '16 at 04:46

What is the best way to align content left and right in a header while using flexbox?

1 Answers1