{"json_modified": "2016-07-25T12:02:07.508024", "uuid": "eb941aa5-23a0-4b34-a288-6ba291965128", "title": "Using flexbox to lay out web applications", "url": "/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications", "tags": ["Guide", "CSS", "Web", "Example", "Advanced", "CSS Flexible Boxes"], "translations": [{"uuid": "e3c616e2-b710-46d9-8cbb-3a365d228388", "title": "Usando flexbox para componer aplicaciones web", "url": "/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web", "tags": ["Cajas Flexibles CSS", "Gu\u00eda", "CSS", "Avanzado", "Web", "Ejemplo"], "summary": "Usar\u00a0<a href=\"/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS\">flexbox</a> puede ayudarte a dise\u00f1ar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a m\u00f3vil. Pon\u00a0fin a los elementos flotantes\u00a0<a href=\"/es/docs/Web/HTML/Elemento/div\" title=\"div de &quot;division&quot; -divisi&#xF3;n . Sirve para crear secciones o agrupar contenidos.\"><code>&lt;div&gt;</code></a>, <a href=\"/en-US/docs/Web/CSS/position#Absolute_positioning\">el posicionamiento absoluto</a>, y los <em>hacks</em> de\u00a0JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas l\u00edneas de\u00a0<a href=\"/es/docs/Web/CSS\">CSS</a>. Algunos ejemplos b\u00e1sicos de casos de uso:", "localization_tags": [], "locale": "es", "last_edit": "2016-06-23T05:22:59", "review_tags": []}, {"uuid": "9de59cf6-ff85-49ab-bc23-9d73ea6c35ac", "title": "Utiliser les bo\u00eetes flexibles pour les applications web", "url": "/fr/docs/Web/CSS/Disposition_des_bo%C3%AEtes_flexibles_CSS/Bo%C3%AEtes_flexibles_pour_applications_web", "tags": ["CSS", "Avanc\u00e9", "Guide"], "summary": "Les bo\u00eetes flexibles permettent de concevoir des dispositions qui s'appliquent mieux \u00e0 des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des \u00e9l\u00e9ments <a href=\"/fr/docs/Web/HTML/Element/div\" title=\"L'&#xE9;l&#xE9;ment HTML &lt;div&gt; (signifiant division du document) est un conteneur g&#xE9;n&#xE9;rique permettant d'organiser le contenu mais qui ne r&#xE9;pr&#xE9;sente rien de particulier. Il peut &#xEA;tre utilis&#xE9; pour grouper d'autres &#xE9;l&#xE9;ments afin de leur appliquer un style (en utilisant les attributs class ou id), ou parce qu'ils partagent des attributs aux valeurs communes, tel que lang. Il doit &#xEA;tre utilis&#xE9; uniquement lorsqu'aucun autre &#xE9;l&#xE9;ment s&#xE9;mantique (comme &lt;article&gt; ou &lt;nav&gt;) n'est appropri&#xE9;.\"><code>&lt;div&gt;</code></a> flottants, <a href=\"/fr/docs/Web/CSS/position#Positionnement_absolu\">le positionnement absolu</a> et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :", "localization_tags": [], "locale": "fr", "last_edit": "2016-07-25T12:02:01", "review_tags": []}, {"uuid": "c645c06e-af63-4dbc-b6d3-9234dd70ca9f", "title": "Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306b flexbox \u3092\u4f7f\u7528\u3059\u308b", "url": "/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications", "tags": ["Guide", "CSS", "Web", "Example", "Advanced", "CSS Flexible Boxes"], "summary": "<a href=\"/ja/docs/Web/Guide/CSS/Flexible_boxes\">flexbox</a> \u306f\u3001\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u304b\u3089\u30e2\u30d0\u30a4\u30eb\u307e\u3067\u5bfe\u5fdc\u3059\u308b Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u8a2d\u8a08\u3067\u52a9\u3051\u306b\u306a\u308a\u307e\u3059\u3002\u6d6e\u52d5\u72b6\u614b\u306e <a href=\"/ja/docs/Web/HTML/Element/div\" title=\"HTML &#x306E; &lt;div&gt; &#x8981;&#x7D20; (HTML Document Division Element) &#x306F;&#x3001;&#x4F55;&#x304B;&#x7279;&#x5B9A;&#x306E;&#x30BB;&#x30DE;&#x30F3;&#x30C6;&#x30A3;&#x30AF;&#x30B9;&#x3092;&#x8868;&#x3059;&#x3082;&#x306E;&#x3067;&#x306F;&#x306A;&#x3044;&#x3001;&#x30D5;&#x30ED;&#x30FC;&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x306E;&#x70BA;&#x306E;&#x6C4E;&#x7528;&#x30B3;&#x30F3;&#x30C6;&#x30CA;&#x3067;&#x3059;&#x3002;&#x30B9;&#x30BF;&#x30A4;&#x30EA;&#x30F3;&#x30B0;&#x306E;&#x305F;&#x3081;&#x306E;&#x30B0;&#x30EB;&#x30FC;&#x30D7;&#x8981;&#x7D20;&#x3068;&#x3057;&#x3066; (class &#x5C5E;&#x6027;&#x304B; id &#x5C5E;&#x6027;&#x3092;&#x4F7F;&#x7528;)&#x3001;&#x3042;&#x308B;&#x3044;&#x306F; lang &#x306A;&#x3069;&#x306E;&#x5C5E;&#x6027;&#x5024;&#x3092;&#x5171;&#x6709;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x4F7F;&#x308F;&#x308C;&#x307E;&#x3059;&#x3002;&#x30BB;&#x30DE;&#x30F3;&#x30C6;&#x30A3;&#x30AF;&#x30B9;&#x4E0A;&#x3067;(&lt;article&gt; &#x3001;&lt;nav&gt;) &#x306A;&#x3069;&#x4ED6;&#x306B;&#x9069;&#x5207;&#x306A;&#x8981;&#x7D20;&#x304C;&#x3042;&#x308B;&#x5834;&#x5408;&#x306F;&#x305D;&#x3061;&#x3089;&#x3092;&#x4F7F;&#x7528;&#x3057;&#x3066;&#x4E0B;&#x3055;&#x3044;&#x3002;\"><code>&lt;div&gt;</code></a> \u8981\u7d20\u3001<a href=\"/ja/docs/Web/CSS/position#Absolute_positioning\">\u7d76\u5bfe\u4f4d\u7f6e\u6307\u5b9a</a>\u3001JavaScript \u306b\u3088\u308b\u7d30\u5de5\u3092\u306a\u304f\u3057\u3066\u3001\u6570\u884c\u306e <a href=\"/ja/docs/Web/CSS\">CSS</a> \u3060\u3051\u3067\u6c34\u5e73\u65b9\u5411\u307e\u305f\u306f\u5782\u76f4\u65b9\u5411\u306e\u30d5\u30ed\u30fc\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002\u57fa\u672c\u7684\u306a\u7528\u9014\u4f8b\u3092\u6319\u3052\u307e\u3059:", "localization_tags": [], "locale": "ja", "last_edit": "2015-12-26T07:38:59", "review_tags": []}, {"uuid": "59cafc8b-e27a-4b97-bf77-ddd27125cb6e", "title": "\u4f7f\u7528flexbox\u6765\u5e03\u5c40web\u5e94\u7528", "url": "/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications", "tags": ["CSS", "\u5f39\u6027\u76d2\u5b50"], "summary": "\u4f7f\u7528\u00a0<a href=\"/en-US/docs/Web/Guide/CSS/Flexible_boxes\">flexbox</a>\u00a0\u53ef\u4ee5\u5e2e\u52a9\u4f60\u8bbe\u8ba1\u51fa\u5f15\u4eba\u6ce8\u76ee\u7684\u5e03\u5c40\uff0c\u5e76\u4e14\u5728pc\u7aef\u6216\u79fb\u52a8\u7aef\u80fd\u591f\u5f88\u597d\u7684\u7f29\u653e\u3002\u544a\u522b\u4f7f\u7528\u6d6e\u52a8\u7684\u00a0<a href=\"/zh-CN/docs/Web/HTML/Element/div\" title=\"HTML &lt;div&gt; &#x5143;&#x7D20; (&#x6216;&#xA0;HTML &#x6587;&#x6863;&#x5206;&#x533A;&#x5143;&#x7D20;) &#x662F;&#x4E00;&#x4E2A;&#x901A;&#x7528;&#x578B;&#x7684;&#x6D41;&#x5185;&#x5BB9;&#x5BB9;&#x5668;&#xFF0C;&#x5B83;&#x5728;&#x8BED;&#x4E49;&#x4E0A;&#x4E0D;&#x4EE3;&#x8868;&#x4EFB;&#x4F55;&#x7279;&#x5B9A;&#x7C7B;&#x578B;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x5B83;&#x53EF;&#x4EE5;&#x88AB;&#x7528;&#x6765;&#x5BF9;&#x5176;&#x5B83;&#x5143;&#x7D20;&#x8FDB;&#x884C;&#x5206;&#x7EC4;&#xFF0C;&#x4E00;&#x822C;&#x7528;&#x4E8E;&#x6837;&#x5F0F;&#x5316;&#x76F8;&#x5173;&#x7684;&#x9700;&#x6C42;&#xFF08;&#x4F7F;&#x7528;&#xA0;class&#xA0;&#x6216;&#xA0;id &#x7279;&#x6027;) &#x6216;&#x8005;&#x5BF9;&#x5177;&#x6709;&#x76F8;&#x540C;&#x7279;&#x6027;&#x7684;&#x4E00;&#x7EC4;&#x5143;&#x7D20;&#x8FDB;&#x884C;&#x5206;&#x7EC4; (&#x6BD4;&#x5982; lang)&#xFF0C;&#x5B83;&#x5E94;&#x8BE5;&#x5728;&#x6CA1;&#x6709;&#x4EFB;&#x4F55;&#x5176;&#x5B83;&#x8BED;&#x4E49;&#x5143;&#x7D20;&#x53EF;&#x7528;&#x662F;&#x624D;&#x4F7F;&#x7528;&#xA0;(&#x6BD4;&#x5982; &lt;article&gt; &#x6216;&#xA0;&lt;nav&gt;) &#x3002;\"><code>&lt;div&gt;</code></a> \u5143\u7d20\u3001<a href=\"/en-US/docs/Web/CSS/position#Absolute_positioning\">\u7edd\u5bf9\u5b9a\u4f4d</a>\u00a0\u548c\u4e00\u4e9bJavaScript hacks, \u4f7f\u7528\u4ec5\u4ec5\u51e0\u884c\u00a0<a href=\"/en-US/docs/Web/CSS\">CSS</a>\u00a0\u5c31\u53ef\u4ee5\u6784\u5efa\u51fa\u6c34\u5e73\u6216\u5782\u76f4\u65b9\u5411\u7684\u5e03\u5c40\u3002\u4e0b\u9762\u662f\u4e00\u4e9b\u57fa\u672c\u7684\u4f7f\u7528\u6848\u4f8b\uff1a", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-04-26T01:05:53", "review_tags": []}], "modified": "2015-12-01T14:36:48", "label": "Using flexbox to lay out web applications", "localization_tags": [], "locale": "en-US", "id": 127827, "last_edit": "2015-12-01T14:36:22", "summary": "Using <a href=\"/en-US/docs/Web/Guide/CSS/Flexible_boxes\">flexbox</a> can help you design compelling layouts in web applications that scale better from desktop to mobile. Put an end to floating <a href=\"/en-US/docs/Web/HTML/Element/div\" title=\"The HTML &lt;div&gt; element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as &lt;article&gt; or &lt;nav&gt;) is appropriate.\"><code>&lt;div&gt;</code></a> elements, <a href=\"/en-US/docs/Web/CSS/position#Absolute_positioning\">absolute positioning</a>, and JavaScript hacks, and start building horizontal and vertical flowing layouts in just a few lines of <a href=\"/en-US/docs/Web/CSS\">CSS</a>. Some basic example use cases:", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Basics", "title": "Basics"}, {"id": "Centering_an_element_inside_a_page", "title": "Centering an element inside a page"}, {"id": "CSS_Content", "title": "CSS Content"}, {"id": "HTML_Content", "title": "HTML Content"}, {"id": "Result", "title": "Result"}, {"id": "Flowing_a_set_of_containers_vertically", "title": "Flowing a set of containers vertically"}, {"id": "CSS_Content_2", "title": "CSS Content"}, {"id": "HTML_Content_2", "title": "HTML Content"}, {"id": "Javascript_Content", "title": "Javascript Content"}, {"id": "Result_2", "title": "Result"}, {"id": "Creating_a_collapsing_horizontal_container", "title": "Creating a collapsing horizontal container"}, {"id": "CSS_Content_3", "title": "CSS Content"}, {"id": "HTML_Content_3", "title": "HTML Content"}, {"id": "Javascript_Content_2", "title": "Javascript Content"}, {"id": "Result_3", "title": "Result"}, {"id": "See_also", "title": "See also"}], "slug": "Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications", "review_tags": []}