左侧2个元素右侧4个元素，间距使用flex

Question

我正在创建一个显示内嵌元素的页脚，左侧有2个图标，右侧有4个元素（按钮+文本）。这是我得到的最接近的，除了右侧翻转。

    .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>

应该是...... 1-6

我尝试删除浮动并在中心div之间放置空格，但不起作用。我错了什么？感谢

Answer 1

忘记花车，做一些这样的事情：

＆＃13;

＆＃13;

.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 */
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;