1

Buen día, me gustaría ver si puedo recibir apoyo en cuanto a un div flex, mas que nada, modificar el contenido dentro del flexbox, necesito que el container tenga texto como al principio, como al final de este.

Pues he intentado de grids hasta floats, esto era una interface antigua y estamos mejorándola, entonces necesitamos cambiar todas las clases existentes a clases nuevas para que no interfiera con las anteriores.

ADJUNTO IMAGEN MUESTRA

Los flexbox deberian de estar del lado izquierdo como se muestra en pantalla y en columnas, ya que eso es un grupo de rows.

O que me recomiendan para continuar con este ejercicio.

IMAGEN MUESTRA

CSS Y HTML:

.test-card-group1{
    width: 300px;
    flex-flow: column nowrap;
}

.test-card{
    background-color: white;
    margin-bottom: 12px;
    border-radius: 20px;
    display: flex;
    -webkit-flex-direction: row; 
    flex-direction: row; 
    flex-wrap: wrap;
    float: left;
    top: 20px;
    left: 30px;
    width: 300px;
    height: 70px;
}

.test-flex-end {
    justify-content: flex-end;
    align-items: right !important;
    display:block;
    list-style:none;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    display: flex-end;
    flex-direction: row;
  }


.test-flex-start {
    justify-content: flex-start;
    align-items: left !important;
    display:block;
    list-style:none;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    display: flex-start;
    flex-direction: row;
  }
                    <div class="test-card-group1">
                    <div class="test-card">
                            <div class="card-body" style="cursor:pointer; padding:0.4rem 1.2rem 0.0rem 1.2rem;" data-toggle="modal" data-target="#modal-admins-rfis">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="d-flex align-items-center">
                                            <div class="left">
                                                <div><h1><i class="icon-loop text-info"></i></h1></div>
                                                <div><h5><?= $t_rfis; ?></h5></div>
                                            </div>
                                            <div class="test-flex-end">
                                                <div><h2 class="counter text-warning"><?= $number_completed_rfis; ?></h2></div>
                                                <div><h2 class="counter text-danger"><?= $number_pending_rfis; ?></h2></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                      </div>

1 respuesta 1

0

Depende de como tengas el markup del documento, pero la solución más sencilla si tienes cada grupo de elementos en su propio contenedor y solo tienes dos contenedores es jugar con el espacio restante. Si añades justify-content: space-between al contenedor padre y al tener solo dos elementos, estos elementos se alinearían a los lados del contenedor dejando el espacio en el medio del contenedor.

.container-flex {
  display: flex;
  justify-content: space-between;
}
<div class="container-flex">

  <div class="start">
    <p>Texto al principio</p>
    <img src="http://placehold.it/100/100">
  </div>

  <div class="end">
    <p>Texto alineado al final</p>
  </div>

</div>

Si tuvieras más elementos o no tuvieras los elementos hijos contenidos en un elemento, podrías también crear un contenedor para uno de los grupos (end, por ejemplo) y añadirle un margin-left: auto para que se alieanara a la derecha:

.container-flex {
  display: flex;
}

.end {
  margin-left: auto;
}
<div class="container-flex">
  
  <p>Texto al principio</p>
  <img src="http://placehold.it/100/100">

  <div class="end">
    <p>Texto alineado al final</p>
  </div>

</div>

1
  • Muchísimas gracias Ander! Voy a probar esto, a ver que tal me va! Creo que lo comprendo ya un poco mejor, gracias! Commented el 1 dic. 2020 a las 12:58

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.