Por ejemplo, si deseas crear un dise\u00f1o de dos columnas para la mayor\u00eda de los tama\u00f1os de pantalla y un dise\u00f1o de una columna para pantallas peque\u00f1as (como tel\u00e9fonos y tabletas), puedes cambiar la direcci\u00f3n flexible de fila a columna en un momento espec\u00edfico. punto de interrupci\u00f3n (800px en el ejemplo a continuaci\u00f3n).<\/p>\n\n\n\n\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n Otra forma es cambiar el porcentaje de la propiedad flexible de los elementos flexibles para crear diferentes dise\u00f1os para diferentes tama\u00f1os de pantalla. Ten en cuenta que tambi\u00e9n tenemos que incluir flex-wrap: wrap;<\/em><\/strong> en el contenedor flexible para que este ejemplo funcione.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Usemos flexbox<\/strong> para crear un sitio web Responsive, que contenga una barra de navegaci\u00f3n flexible y contenido flexible.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Por ejemplo, si deseas crear un dise\u00f1o de dos columnas para la mayor\u00eda de los tama\u00f1os de pantalla y un dise\u00f1o de una columna para pantallas peque\u00f1as (como tel\u00e9fonos y tabletas), puedes cambiar la direcci\u00f3n flexible de fila a columna en un momento espec\u00edfico. punto de interrupci\u00f3n (800px en el ejemplo a continuaci\u00f3n).<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":24,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1460","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Por ejemplo, si deseas crear un dise\u00f1o de dos columnas para la mayor\u00eda de los tama\u00f1os de pantalla y un dise\u00f1o de una columna para pantallas peque\u00f1as (como tel\u00e9fonos y tabletas), puedes cambiar la direcci\u00f3n flexible de fila a columna en un momento espec\u00edfico. punto de interrupci\u00f3n (800px en el ejemplo a continuaci\u00f3n).","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1460"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1460\/revisions"}],"predecessor-version":[{"id":1463,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1460\/revisions\/1463"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!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><\/pre>\n\n\n\n<!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><\/pre>\n\n\n\nSitio web Responsive usando Flexbox<\/h2>\n\n\n\n
<!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><\/pre>\n","protected":false},"excerpt":{"rendered":"