Un diseño flexible debe tener un elemento principal que tenga la propiedad de visualización establecida en flex. Los elementos secundarios directos del contenedor flexible se convierten automáticamente en elementos flexibles.
Acercarse:
- El siguiente elemento representa un contenedor flexible con cuatro elementos flexibles.
<divid="container"><ul><li>icecream</li><li>sandwich</li><li>juice</li><li>coldrink</li></ul></div> - Elemento padre (contenedor)
El contenedor flexible se vuelve flexible al hacer que la propiedad de visualización se flexione:
.flex-container {display: flex;} - La propiedad de envoltura flexible
La propiedad flex-wrap establece si los elementos flexibles deben ajustarse o no.
.flex-container {display: flex;flex-wrap: wrap;}Envuelve el valor especifica que los elementos flexibles se ajustarán si es necesario
- Alineación del texto
La propiedad text-align establece la alineación horizontal de un texto. Un texto puede estar alineado a la izquierda o a la derecha, centrado o justificado.
h1{text-align:center;}h2{text-align:left;}h3{text-align:right;} - CSS Configuración de alto y ancho
Las propiedades de alto y ancho se utilizan para establecer el alto y el ancho de un elemento.
div {height:500px;width:50%;} - Relleno CSS
La propiedad padding de CSS se usa para generar espacio alrededor de un elemento, dentro de los bordes.
div {padding-top:100px;padding-right:50px;padding-bottom:1000px;padding-left:100px;} - Márgenes CSS
La propiedad de margen CSS se usa para crear espacio alrededor de los elementos, fuera de los bordes.
p {margin-top:100px;margin-bottom:100px;margin-right:150px;margin-left:80px;}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
border: 5px solid green;
}
li {
list-style-type: none;
border: 1px solid gray;
margin: 15px;
padding: 5px;
width: 200px;
text-align: center;
}
</style>
<body>
<div id="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<p> Geeks for Geeks </p>
</div></body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priyankakoundel03 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA