0

estoy teniendo un problema con flexbox. Tengo un DIV con class 'wrapper' y dentro hay otros 2 DIVs. Lo que estoy intentando en que cada uno de los DIVs se vea de un lado de la pantalla. Como dividiendo la pantalla en 2. Adjunto el HTML

<div class="loading">
  <app-loading-spinner *ngIf="!owners"></app-loading-spinner>
</div>
<div class="wrapper">
  <div class="owners-container" *ngFor="let owner of owners">
    <p class="owner">
      <strong> Full name:</strong> {{ owner.first_name }} {{ owner.last_name }}
      <strong>| Gender:</strong> {{ owner.gender }} <strong> | Status:</strong>
      {{ owner.status }}
    </p>
  </div>
  <div class="owners-details-container">
    <h2>Alguna data</h2>
    <p>en un dato</p>
    <p>en un dato</p>
    <p>en un dato</p>
    <p>en un dato</p>
  </div>
</div>

Y el CSS es:

.loading {
  display: grid;
  place-content: center;
}
.owner {
  border: 2px solid black;
  padding: 1em;
  width: 50%;
}
.owner:hover {
  background-color: lightgray;
  cursor: pointer;
}
.wrapper {
  margin: 4em;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

.owners-details-container {
  border: 2px solid black;
  padding: 2em;
  width: 40%;
}

Desde ya muchas gracias

1 respuesta 1

1

Has intentado esto:

.wrapper {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  border: 2px solid red;
}

Y otra manera empezar de zero y crear algo asi

<div>
    <div style="display: flex; flex: 1; flex-direction: row; justify-content: space-between;">
        <!-- left column -->
        <div style="width: 40%; background-color: antiquewhite;">
            <div style="padding: 12px; border: 1px blue solid;" *ngFor="let owner of owners">
                <p>
                    <strong> Full name:</strong> {{ owner.name }} {{ owner.name }}
                    <strong>| Gender:</strong> {{ owner.from }} <strong> | Status:</strong> {{ owner.to }}
                </p>
            </div>
        </div>
        <!-- right column -->
        <div style="width: 40%; background-color: rgb(216, 127, 10);">
            <div style="border: 1px red solid; padding: 12px;">
                <h2>Alguna data</h2>
                <p>en un dato</p>
                <p>en un dato</p>
                <p>en un dato</p>
                <p>en un dato</p>
            </div>
        </div>
    </div>
</div>

No mires los datos de tu lista lo cambie para hacer una prueba Y el resultado Flex

4
  • Si, lo que sucede es que se generan 2 columnas pero se salen de la pantalla y los párrafos del ''owners-container'' se muestran de forma vertical. Y ahi no se como acomodarlo.
    – Daro
    el 25 jul. 2020 a las 10:08
  • 1
    He modificado mi respuesta, comprueba ahora espero que es lo que buscas el 25 jul. 2020 a las 10:43
  • Si, con esa estructura funciono! Muchas gracias.
    – Daro
    el 25 jul. 2020 a las 12:16
  • ahi lo hice! Gracias @marcos y Tomaz
    – Daro
    el 30 jul. 2020 a las 17:56

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.

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