CSS - Align items to parent's right

Question

I'm trying to make a div with icons align to parent's right, but it's not going well. Tried to use flexbox, but had no success. It needs to be responsive

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

awesome result:

score 1 · Accepted Answer · answered Oct 15 '20 at 02:41

Set .items as flex layout and use justify-content: space-between on .items selector and it will work.
Also, need to remove float: right on .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;
}

score 0 · Answer 2 · answered Oct 15 '20 at 02:38

Looks like height of the .items class objects is meaning each .container-icones item is blocking the way for the next one.

Try changing the height of .items from 70% to 100% (or even more) for testing, and see if the .container-icones divs then have space to align vertically all floated right properly.

CSS - Align items to parent's right

2 Answers2