1

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:

introducir la descripción de la imagen aquí

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

1 respuesta 1

0

Los iconos se pueden alinear a la derecha usando el posicionamiento absoluto; para evitar que el icono se desborde se le asigna el posicionamiento relativo a el div padre.

.task-container {
    position: relative;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid $accent-color;
    width: 100%;
}
.task-container #delete-task-icon {
    position: absolute;
    right: 0;
}
<!doctype html>
<html>
    <head>
        <title>Developer</title>
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    </head>
    <body>
        <div class="task-container" id=${task.id}>
            <i class="far fa-square" data-id=${task.id}></i>
            <li class="task-item">${task.description}</li>
            <i class="fas fa-trash-alt" id="delete-task-icon" data-id=${task.id}></i>
        </div>
      </div>
    </body>
</html>

2
  • Efectivamente esto resuelve el problema. Otra solución que funciona y encontré en stackoverflow es simplemente añadir margin-left:auto que provoca que el elemento se aleje desde la izquierda lo más a la derecha posible.
    – user80959
    el 2 dic. 2021 a las 20:41
  • Hay muchas formas de alinear los iconos, algunas mas fáciles otras mas complejas. el 2 dic. 2021 a las 20:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.