Por ejemplo, si deseas crear un diseño de dos columnas para la mayoría de los tamaños de pantalla y un diseño de una columna para pantallas pequeñas (como teléfonos y tabletas), puedes cambiar la dirección flexible de fila a columna en un momento específico. punto de interrupción (800px en el ejemplo a continuación).
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-direction: row;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
flex: 50%;
}
.flex-item-right {
background-color: dodgerblue;
padding: 10px;
flex: 50%;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>Responsive Flexbox</h1>
<p>
The "flex-direction: row;" stacks the flex items horizontally (from left
to right).
</p>
<p>
The "flex-direction: column;" stacks the flex items vertically (from top
to bottom).
</p>
<p>
<b
>Resize the browser window to see that the direction changes when the
screen size is 800px wide or smaller.</b
>
</p>
<div class="flex-container">
<div class="flex-item-left">1</div>
<div class="flex-item-right">2</div>
</div>
</body>
</html>
Otra forma es cambiar el porcentaje de la propiedad flexible de los elementos flexibles para crear diferentes diseños para diferentes tamaños de pantalla. Ten en cuenta que también tenemos que incluir flex-wrap: wrap; en el contenedor flexible para que este ejemplo funcione.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
flex: 50%;
}
.flex-item-right {
background-color: dodgerblue;
padding: 10px;
flex: 50%;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
</style>
</head>
<body>
<h1>Responsive Flexbox</h1>
<p>
In this example, we change the percentage of flex to create different
layouts for different screen sizes.
</p>
<p>
<b
>Resize the browser window to see that the direction changes when the
screen size is 800px wide or smaller.</b
>
</p>
<div class="flex-container">
<div class="flex-item-left">1</div>
<div class="flex-item-right">2</div>
</div>
</body>
</html>
Sitio web Responsive usando Flexbox
Usemos flexbox para crear un sitio web Responsive, que contenga una barra de navegación flexible y contenido flexible.
Ejm
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row,
.navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Note -->
<div style="background: yellow; padding: 5px">
<h4 style="text-align: center">
Resize the browser window to see the responsive effect.
</h4>
</div>
<!-- Header -->
<div class="header">
<h1>My Website</h1>
<p>With a <b>flexible</b> layout.</p>
</div>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height: 200px">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height: 60px">Image</div>
<br />
<div class="fakeimg" style="height: 60px">Image</div>
<br />
<div class="fakeimg" style="height: 60px">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height: 200px">Image</div>
<p>Some text..</p>
<p>
Sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.
</p>
<br />
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height: 200px">Image</div>
<p>Some text..</p>
<p>
Sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.
</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>