0
273
Views¿Cómo hacer que mi diseño de encabezado sea así?
Tengo dificultades para hacer que mi encabezado se vea así, donde la izquierda y la derecha toman el ancho mínimo posible:
Lo que tengo hasta ahora:
*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } header { display: grid; grid-template-columns: 1fr 1fr 1fr; } header div { min-height: 7rem; display: flex; align-items: center; padding: 2rem 5rem; background-color: blue; } .center { background-color: yellow; } .right { background-color: red; } <header> <div class="left">Left</div> <div class="center">Center</div> <div class="right">Right</div> </header>3 answers
Answer question0
Utilice flex-grow: 1 .
Esto se puede lograr fácilmente usando display: flex y flex-grow: 1 .
Obtenga más información sobre flexbox:
*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } header { display: flex; } header div { min-height: 7rem; align-items: center; padding: 2rem 3rem; background-color: blue; } .center { background-color: yellow; flex-grow: 1; } .right { background-color: red; } <header> <div class="left">Left</div> <div class="center">Center</div> <div class="right">Right</div> </header>0
El uso 1fr 1fr 1fr para el diseño de la cuadrícula significa que cada uno de los elementos tiene el mismo ancho: comparten el ancho disponible entre ellos.
Si desea que los lados izquierdo y derecho ocupen el ancho mínimo necesario para contenerlos, configúrelos en auto y el del medio en 1fr . El del medio ocupará todo el ancho restante.
*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } header { display: grid; grid-template-columns: auto 1fr auto; } header div { min-height: 7rem; display: flex; align-items: center; padding: 2rem 5rem; background-color: blue; } .center { background-color: yellow; } .right { background-color: red; } <header> <div class="left">Left</div> <div class="center">Center</div> <div class="right">Right</div> </header>Obtenga más información en:
0
1fr 1fr 1fr crea un problema al dar el mismo ancho, por lo que he usado auto 1fr auto by set auto, puede cambiar el ancho de izquierda a derecha en relación con el padre. o puede establecer valores para izquierda y derecha, por ejemplo: 0.2fr 0.2fr
*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } header { display: grid; grid-template-columns: auto 1fr auto; } header div { min-height: 7rem; display: flex; align-items: center; padding: 2rem 5rem; background-color: blue; } .center { background-color: yellow; } .right { background-color: red; } <header> <div class="left">Left</div> <div class="center">Center</div> <div class="right">Right</div> </header>