He leído que dentro de un contenedor flexible, si le damos una etiqueta hr , se volverá vertical . He intentado lo mismo, pero no puedo lograrlo. Me estoy perdiendo de algo ?
.outer-div { background-color: aqua; } .inner-div { display: flex; justify-content: space-between; } <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <div class="outer-div"> <div class="inner-div"> <div class="details-div"> <i class="fas fa-band-aid">I</i> <span>Get Details</span> </div> <hr /> <div class="call-div"> <i class="fas fa-band-aid">I</i> <span>Call Customer Care</span> </div> </div> </div>transform: rotate(90deg) Un enfoque para lograr un <hr> vertical es simplemente aplicar:
transform: rotate(90deg);Ejemplo de trabajo:
.inner-div { display: flex; justify-content: space-around; } .inner-div hr { flex: 0 0 40%; transform: rotate(90deg); } <div class="inner-div"> <div class="details-div">Get Details</div> <hr /> <div class="call-div">Call Customer Care</div> </div>height y width explícitos Otro enfoque es declarar dimensiones exlícitas para su <hr> :
width: 0;height: 120pxEjemplo de trabajo:
.inner-div { display: flex; justify-content: space-around; } .inner-div hr { width: 0px; height: 120px; } <div class="inner-div"> <div class="details-div">Get Details</div> <hr /> <div class="call-div">Call Customer Care</div> </div>Sí, el problema es que el margin en <hr/> lo convierte en casi un punto. Puede establecer su margin: 0 en <hr/> para lograr el comportamiento esperado
La razón de esto es que el valor predeterminado de
align-itemsesstretchpor lo que<hr>obtendrá la misma altura que el elemento más grande en el contenedor flexible [...].
Citado de esta publicación SO
.outer-div { background-color: aqua; } .inner-div { display: flex; justify-content: space-between; } hr { margin: 0; } <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <div class="outer-div"> <div class="inner-div"> <div class="details-div"> <i class="fas fa-band-aid">I</i> <span>Get Details</span> </div> <hr /> <div class="call-div"> <i class="fas fa-band-aid">I</i> <span>Call Customer Care</span> </div> </div> </div>puedes usar este código para hacerlo
.className{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; }esta funcionando Tu elemento es tan corto que parece un punto.
.outer-div { background-color: pink; } .inner-div { display: flex; justify-content: space-between; min-height: 100px; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="outer-div"> <div class="inner-div"> <div class="details-div"> <i class="fas fa-band-aid"></i> <span>Get Details</span> </div> <hr /> <div class="call-div"> <i class="fas fa-band-aid"></i> <span>Call Customer Care</span> </div> </div> </div>