CSS - 将项目与父母的权利对齐[重复]答案

【问题标题】：CSS - Align items to parent's right [duplicate]CSS - 将项目与父母的权利对齐[重复]
【发布时间】：2021-01-29 11:50:02
【问题描述】：

我正在尝试使图标与父级对齐的 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>

styles.css

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

很棒的结果：

【问题讨论】：

标签： css reactjs flexbox responsive

【解决方案1】：

将.items 设置为弹性布局并在.items 选择器上使用justify-content: space-between，它会起作用。
另外，需要删除float: right 上的.container-icones。

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

【讨论】：

【解决方案2】：

看起来.items 类对象的高度意味着每个.container-icones 项目都阻碍了下一个项目。

尝试将.items 的height 从70% 更改为100%（甚至更多）以进行测试，然后查看.container-icones div 是否有空间垂直对齐所有浮动正确。

【讨论】：