Estoy tratando de crear una nueva aplicación que serialice la barra superior y la barra lateral y las envuelva en una etiqueta de formulario, pero imprima la barra lateral y los resultados uno al lado del otro.
Hasta ahora he intentado replicarlo con flex, pero desafortunadamente no he encontrado la manera. Solo lo logré con float. Sin embargo, me gustaría usar flex, si es posible.
Además, es posible que los resultados no se incluyan en la etiqueta del formulario, ya que este formulario contiene sus propias etiquetas y, por lo tanto, provocaría errores.
.app { background-color: rgba(255,0,0,0.3); padding: 40px; } .form { display: unset; } .topbar { width: 100%; background-color: rgba(0,255,0); } .sidebar { width: 20%; float: left; background-color: rgba(0,0,255,0.3); } .results { width: 80%; float: left; background-color: rgba(0,255,255,0.3); } .app:after { content: ""; display: table; clear: both; } <div class="app"> <form class="form"> <div class="topbar">Topbar</div> <div class="sidebar">Sidebar</div> </form> <div class="results">results</div> </div>Puede imitar el tipo de comportamiento float con margin-left/margin-right: auto cuando usa flexbox, pero tiene que adaptar un poco el marcado ya que tiene que haber un contenedor (con display: flex set) que contenga los elementos como elementos secundarios directos que quieres "flotar". Algo como esto:
.app { background-color: rgba(255,0,0,0.3); padding: 40px; } .form__container { display: flex; } .form { width: 20%; } .topbar { width: 100%; background-color: rgba(0,255,0); } .sidebar { background-color: rgba(0,0,255,0.3); } .results { width: 80%; margin-left: auto; /* this is the key to imitate float */ background-color: rgba(0,255,255,0.3); } <div class="app"> <div class="topbar">Topbar</div> <div class="form__container"> <form class="form"> <div class="sidebar">Sidebar</div> </form> <div class="results">results</div> </div> </div>En realidad, @Paulie_D respondió mi pregunta. ¡Eso es exactamente lo que quería! ¡Gracias! :D
.app { display: flex; flex-wrap: wrap; background-color: rgba(255,0,0,0.3); } .form { display: contents; } .topbar { flex: 0 0 100%; background-color: rgba(0,255,0); } .sidebar { flex: 0 0 20%; background-color: rgba(0,0,255,0.3); } .results { flex: 0 0 80%; background-color: rgba(0,255,255,0.3); } <div class="app"> <form class="form"> <div class="topbar">Topbar</div> <div class="sidebar">Sidebar</div> </form> <div class="results">results</div> </div>