2 elements on left 4 elements on right, space-between using flex

Question

I'm creating a footer that displays inline elements with 2 icons to the left and 4 elements pushed right (buttons + text). This is the closest I've gotten, except the right side is flipped around.

.container {
    width: 100%;
}

.f_col_1 {
    width: 5%;
    float: left;
    background: #ccc; 
    border: 1px solid black; 
}

.f_col_1  {
    width: 5%;
    float: left;
    background: #ccc;
    border: 1px solid black; 
}

.f_col_5 {
    width: 30%;
    display: block;
    background: #ddd;
    text-align: center;
}

.f_col_2 {
    width: 10%;
    float: right;
    background: #bbb;
    border: 1px solid black; 
}

.f_col_3 {
    width: 20%;
    float: right;
    background: #bbb;
    border: 1px solid black; 
}

.f_col_2 {
    width: 10%;
    float: right;
    background: #bbb;
    border: 1px solid black; 
}

.f_col_3 {
    width: 20%;
    float: right;
    background: #bbb;
    border: 1px solid black; 
}

@media only screen and (max-width: 900px) {    
    div[class^="f_col_"]{
        width: 100%;
    }
}

<div class="container">
    <div class="f_col_1">(1)icon</div>
    <div class="f_col_1">(2) icon</div>
    <div class="f_col_5"></div>
    <div class="f_col_2" >(3)button</div>
    <div class="f_col_3" >(4)555.555.5555 </div>
    <div class="f_col_2" >(5)button</div>
    <div class="f_col_3" >(6)email@internet.com</div>
</div>

It should be... 1-6

I've tried removing floats and putting space-between on center div, but doesn't work. What am I getting wrong? Thanks

_"What am I getting wrong?"_ - how could we possibly tell, if you don't show us what you actually tried ...? Please go read [ask]. — CBroe, Dec 06 '17 at 18:43
possible duplicate: https://stackoverflow.com/q/32551291/3597276 — Michael Benjamin, Dec 06 '17 at 18:44
Wen using `float: right` it swap element order, keep going with `left`: https://jsfiddle.net/yn87p1w0/ — Asons, Dec 08 '17 at 07:32

score 1 · Accepted Answer · answered Dec 06 '17 at 19:40

Forget the floats and do something like this instead:

.container {
  display: flex; /* displays children inline */
}

.f_col_1  {
  background: #ccc;
  border: 1px solid black; 
}

.f_col_2,
.f_col_3 {
  background: #bbb;
  border: 1px solid black; 
}

.container > div:nth-child(3) { /* makes a space between the 2nd and 3rd child */
  margin-left: auto;
}

@media screen and (max-width: 900px) {    
  .container {
    flex-direction: column; /* stacks children vertically */
  }
  .container > div:nth-child(3) {
    margin-left: initial; /* back to default */
  }
}

<div class="container">
  <div class="f_col_1">(1) icon</div>
  <div class="f_col_1">(2) icon</div>
  <div class="f_col_2">(3) button</div>
  <div class="f_col_3">(4) 555.555.5555</div>
  <div class="f_col_2">(5) button</div>
  <div class="f_col_3">(6) email@internet.com</div>
</div>

2 elements on left 4 elements on right, space-between using flex

1 Answers1