html - 左边2个元素，右边4个元素，使用flex之间的间隔

This question already has answers here:

In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
                                
                                    （4个答案）
                                
                        
                                2年前关闭。
            
                    
我正在创建一个页脚，该页脚显示内联元素，其中左侧有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)[e-mail]</div>
</div>

应该是... 1-6

我试过删除浮点数，并在中心div上放置空格，但是不起作用。我怎么了？谢谢

最佳答案

忘记浮标，改为执行以下操作：

.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) [e-mail]</div>
</div>

关于html - 左边2个元素，右边4个元素，使用flex之间的间隔，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47681312/