CSS-将项目与父项对齐'；是的

我试着让一个div的图标与家长的右边对齐，但效果不太好。尝试使用flexbox，但没有成功。它需要作出反应

index.js

 <div className="container">
            <h1>Painel do Administrador</h1>
            <p>Selecione o conteúdo que deseja alterar:</p>
            
                {temp.map((t, i) => {
                    return <div className="items">
                        {t}
                        <div className="container-icones">
                            <GrFormAdd color="#023373" className="icones" />
                            <GrFormEdit className="icones" />
                            <GrFormClose className="icones" />
                        </div>
                    </div>
                })}
            
        </div>

.container {
    width: 100%;
    height: 100%; /* TODO reveer container */
    /* border: black solid; */
    margin: 10px; /* TODO retirar, está em cima da barra de rolagem ???? */
    
}
.items {
    width: 60%;
    height: 70%; /** WHY can't I increase height??? **/
    margin: 10px;
    padding: 5px;
    box-shadow: 0 3px 6px 0 #00000033, 0 3px 10px 0 #00000030;
    /* flexbox
    display: flex;
    */
}
.container-icones {
    height: 100%;
    float: right;
    border: orange solid;
    /* flexbox
    align-self: right */
}
.icones {
    font-size: 30px;
    color: #023373;
}

令人敬畏的结果：

---

看起来像是

类对象的高度。items

类对象表示每个

。容器图标

项为下一个项目挡住了道路

尝试将

项目的
高度
从
70%
更改为
100%
（或更多）以进行测试，然后查看
容器图标
分区是否有空间垂直对齐所有浮动正确。

将
.items
设置为flex布局，并在
.items
选择器上使用
对内容进行对齐：在
之间留出空间，这样它就可以工作了

另外，需要删除
容器图标上的
浮动：右


.items {
  width: 60%;
  height: 70%;
  margin: 10px;
  padding: 5px;
  box-shadow: 0 3px 6px 0 #00000033, 0 3px 10px 0 #00000030;

  /* Add this line */
  display: flex;
  justify-content: space-between;
}

.container-icones {
  height: 100%;
  /*float: right;*/ /* Remove this line */
  border: orange solid;
}