estoy tratando de colocar un item en particular (el bote de basura con fondo rojo) dentro un div a la derecha usando flexbox, a pesar de haber utilizado muchas fórmulas que he encontrado en la red como esta y está otra ninguna me ha funcionado, el item permanece justificado a la izquierda. Adjunto la siguiente imagen como guía visual:
El código HTML es el siguiente:
<div class="task-container" id=${task.id}>
<i class="far fa-square" data-id=${task.id}></i>
<li class="task-item">
${task.description}
</li>
<div>
<i class="fas fa-trash-alt" id="delete-task-icon" data-id=${task.id}></i>
</div>
</div>
El código CSS para el container:
.task-container {
display: flex;
border-bottom: 1px solid $accent-color;
justify-content: flex-start;
width: 100%;
}
El código para seleccionar el item del icono de basura:
.task-container div:nth-of-type(1) {
display: flex-end;
align-content: flex-end;
align-items: flex-end;
background-color: red;
}