CSS Flexbox es una herramienta increíble para crear diseños de sitios web. Hacer que un niño de caja flexible tenga el 100% de la altura de su padre se puede hacer de dos maneras. Es un poco complicado porque, ciertamente, mostrará un error.
Por ejemplo, el elemento secundario puede fluir fuera del límite principal o puede que no alcance el 100 % de la altura que verá en la salida de su navegador.
Ejemplo 1: Este ejemplo crea un flex-box hijo de altura 100% usando CSS.
html
<!DOCTYPE html>
<html>
<head>
<title>
Make flex-box child height 100%
</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 50vh;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
.child-div {
height: 100%;
background-color: red;
margin: 0 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="child-div">
One
</div>
<div class="child-div">
Two
</div>
<div class="child-div">
Three
</div>
<div class="child-div">
Four
</div>
<div class="child-div">
Five
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: la segunda forma de lograr esto mediante el uso de la propiedad align-items en el div principal para ‘estirar’. Hace que cada .child-div tenga el 100% de la altura de su altura principal.
html
<!DOCTYPE html>
<html>
<head>
<title>
Make flex-box child height 100%
</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 100vw;
height: 50vh;
background-color: green;
display: flex;
justify-content: center;
}
.child-div{
background-color: red;
margin: 0 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="child-div">
One
</div>
<div class="child-div">
Two
</div>
<div class="child-div">
Three
</div>
<div class="child-div">
Four
</div>
<div class="child-div">
Five
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: este ejemplo hace que el ancho del hijo sea el 100% del padre.
html
<!DOCTYPE html>
<html>
<head>
<title>
Make flex-box child width 100%
</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 50vh;
background-color: green;
display: flex;
flex-direction: column;
justify-content: center;
}
.child-div {
background-color: red;
margin: 20px 0;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="child-div">
One
</div>
<div class="child-div">
Two
</div>
<div class="child-div">
Three
</div>
<div class="child-div">
Four
</div>
<div class="child-div">
Five
</div>
</div>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome 29.0
- Internet Explorer 11.0
- Firefox 22.0
- Ópera 48
- safari10
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por Pankaj_Singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA