{"json_modified": "2016-10-27T03:03:04.068417", "uuid": "df363936-4a62-42c9-af02-7c0411c57514", "title": "Using CSS Flexible Boxes", "url": "/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes", "tags": ["Guide", "Flexible", "Advanced", "#RWD", "Web", "Example", "CSS", "Boxes"], "translations": [{"uuid": "ecf4f820-f9a9-4190-94fe-8081c2ff0b06", "title": "Using CSS flexible boxes", "url": "/bn-BD/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes", "tags": ["NeedsReview"], "summary": "The CSS3 <strong>Flexible Box</strong>, or <strong>flexbox</strong>, is a <a href=\"/en-US/docs/CSS/Layout_mode\" title=\"/en-US/docs/CSS/Layout_model\">layout mode</a> providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.", "localization_tags": ["inprogress"], "locale": "bn-BD", "last_edit": "2015-11-16T06:38:27", "review_tags": ["technical", "editorial"]}, {"uuid": "adca48d1-4fcf-41e1-8741-87d6ccd1c165", "title": "Utilitzar el model de caixes flexible de CSS", "url": "/ca/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilitzar_model_flexible_caixes_CSS", "tags": [], "summary": "El model de Caixes Flexible de CSS3 (<strong>Flexible Box\u00a0</strong>en angl\u00e8s), o\u00a0<em>flexbox</em>, \u00e9s un <a href=\"/en-US/docs/CSS/Layout_mode\" title=\"/en-US/docs/CSS/Layout_model\">mode de disseny</a>\u00a0 que preveu la disposici\u00f3 dels elements en una p\u00e0gina de tal manera que els elements es comporten d'una forma predictible quan el disseny de la p\u00e0gina s'ha d'adaptar a diferents mides de pantalla i a diferents dispositius de visualitzaci\u00f3.", "localization_tags": [], "locale": "ca", "last_edit": "2015-11-16T06:35:50", "review_tags": []}, {"uuid": "8033e05f-41f9-4820-a31a-f1561b83234b", "title": "Using CSS flexible boxes", "url": "/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes", "tags": [], "summary": "Die CSS3 Flexible Box, auch flexbox genannt, ist ein Layoutmodus um Elemente einer Seite so anzuordnen, dass sie sich vorhersagbar verhalten, wenn sich das Layout verschiedenen Bildschirmgr\u00f6\u00dfen und Ausgabeger\u00e4ten anpasst. F\u00fcr viele Anwendungsf\u00e4lle stellt das Flexible Box Modell eine Verbesserung gegen\u00fcber dem Block Modell dar, da es keine Floats nutzt. Au\u00dferdem werden die Margins eines Containers nicht mit den Margins seines Inhalts zusammenfallen.", "localization_tags": ["inprogress"], "locale": "de", "last_edit": "2016-10-18T02:57:32", "review_tags": ["editorial"]}, {"uuid": "6dc8590d-32d6-4561-945c-aa840dd0a665", "title": "Usando las cajas flexibles CSS", "url": "/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS", "tags": [], "summary": "La propiedad <strong>Flexible Box</strong>, o\u00a0<strong>flexbox</strong>, de CSS3 es un\u00a0<a href=\"/en-US/docs/CSS/Layout_mode\" title=\"/en-US/docs/CSS/Layout_mode\">modo de dise\u00f1o</a>\u00a0que permite colocar los elementos de una p\u00e1gina para que se comporten de forma predecible cuando el dise\u00f1o de la p\u00e1gina debe acomodarse a diferentes tama\u00f1os de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo \"caja flexible\" produce una mejora sobre el modelo \"bloque\" porque no utiliza la propiedad\u00a0<span style=\"font-family: courier new,andale mono,monospace;\">float</span>, ni hace que los m\u00e1rgenes del contenedor flexible interfieran con los m\u00e1rgenes de sus contenidos.", "localization_tags": [], "locale": "es", "last_edit": "2016-10-27T03:02:51", "review_tags": ["editorial"]}, {"uuid": "2384217a-56cc-402c-a759-750c6fa77e0a", "title": "Utilisation des flexbox en CSS", "url": "/fr/docs/Web/CSS/Disposition_des_bo%C3%AEtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS", "tags": ["CSS", "flexbox", "Web", "Flexbox", "Guide"], "summary": "<strong>Flexbox</strong> (pour <span lang=\"en\">flexible box</span>) est un <a href=\"/fr/docs/Web/CSS/Mode_de_mise_en_page\">mode de mise en page</a> pr\u00e9voyant une disposition des \u00e9l\u00e9ments d\u2019une page de telle sorte que ces \u00e9l\u00e9ments poss\u00e8dent un comportement pr\u00e9visible lorsqu\u2019ils doivent s\u2019accommoder de diff\u00e9rentes tailles d\u2019\u00e9crans/appareils", "localization_tags": [], "locale": "fr", "last_edit": "2016-09-18T04:53:38", "review_tags": []}, {"uuid": "b230f419-d31c-404d-a629-4ca7372278b7", "title": "Using CSS flexible boxes", "url": "/it/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes", "tags": [], "summary": "Il CSS3 <strong>Flexible Box</strong>, o <strong>flexbox</strong>, \u00e8 un <a href=\"/en-US/docs/Web/CSS/Layout_mode\">layout mode</a> che prevede la disposizione di elementi su una pagina in modo tale che questi si comportino prevedibilmente quando la pagina di layout cambia di risoluzione o quando si cambia schermo .", "localization_tags": ["inprogress"], "locale": "it", "last_edit": "2015-12-23T02:31:32", "review_tags": []}, {"uuid": "b5bbb7be-3923-4adc-bdb1-01889f0d008c", "title": "CSS flexible box \u306e\u5229\u7528", "url": "/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes", "tags": ["Guide", "Flexible", "Advanced", "Web", "Example", "CSS", "Boxes"], "summary": "CSS3 <strong>Flexible Box</strong> (\u53ef\u5909\u30dc\u30c3\u30af\u30b9)\u3001\u307e\u305f\u306f <strong>flexbox</strong> \u306f\u3001\u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u69d8\u3005\u306a\u30b9\u30af\u30ea\u30fc\u30f3\u30b5\u30a4\u30ba\u3084\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u30c7\u30d0\u30a4\u30b9\u306b\u9069\u5fdc\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u5834\u5408\u306b\u3001\u30da\u30fc\u30b8\u4e0a\u306e\u8981\u7d20\u304c\u6307\u5b9a\u3057\u305f\u901a\u308a\u306b\u914d\u7f6e\u3055\u308c\u308b<a href=\"/ja/docs/CSS/Layout_mode\" title=\"CSS/Layout_model\">\u30ec\u30a4\u30a2\u30a6\u30c8\u30e2\u30fc\u30c9</a>\u3067\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-08-06T03:11:03", "review_tags": []}, {"uuid": "dde176d7-335c-487c-aeaf-0ddb0af7a1bc", "title": "Usando CSS flexible boxes (Caixas Flex\u00edveis)", "url": "/pt-BR/docs/CSS/Usando_caixas_flexiveis_css", "tags": [], "summary": "CSS Flexible Box Layout Model (Modelo de Layout Caixas Flex\u00edveis de CSS), tamb\u00e9m conhecida como \"flexbox\", \u00e9 parte do rascunho da especifica\u00e7\u00e3o do CSS3. Ele prov\u00ea uma CSS Box Model otimizada para o design de interfaces com o usu\u00e1rio. Elementos filhos no layout flex podem ser posicionados em qualquer dire\u00e7\u00e3o e possuem dimens\u00f5es flex\u00edveis para se adaptar ao espa\u00e7o dispon\u00edvel. Posicionar esses nodos filhos pode ser feito facilmente, e layouts complexos podem ser constru\u00eddos de uma maneira mais clara e limpa. A ordem de exibi\u00e7\u00e3o dos elementos \u00e9 independente da ordem no c\u00f3digo fonte.", "localization_tags": [], "locale": "pt-BR", "last_edit": "2016-06-06T02:19:42", "review_tags": []}, {"uuid": "468ad082-507c-41c4-ab02-e85e7677f191", "title": "\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c CSS Flexible Boxes", "url": "/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes", "tags": [], "summary": "CSS3 <strong>Flexible Box</strong>, \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e <strong>flexbox</strong> \u2014 \u044d\u0442\u043e \u0440\u0435\u0436\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0432\u0435\u043b\u0438 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043f\u043e\u0434 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.", "localization_tags": ["inprogress"], "locale": "ru", "last_edit": "2016-10-09T15:29:38", "review_tags": []}, {"uuid": "470cc6e7-fb88-40b1-8ece-0d1156ee4c42", "title": "\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f CSS flexible-\u0431\u043e\u043a\u0441\u0456\u0432", "url": "/uk/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes", "tags": [], "summary": "CSS3 <strong>flex-\u0431\u043e\u043a\u0441</strong>, \u0430\u0431\u043e\u00a0<strong>flexbox</strong>, \u0446\u0435\u00a0<a href=\"/en-US/docs/Web/CSS/Layout_mode\">\u0440\u0435\u0436\u0438\u043c \u0440\u043e\u0437\u043c\u0456\u0442\u043a\u0438</a>\u00a0\u0441\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0443\u043f\u043e\u0440\u044f\u0434\u043a\u0443\u0432\u0430\u043d\u043d\u044f \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456 \u0442\u0430\u043a\u0438\u043c \u0447\u0438\u043d\u043e\u043c, \u0449\u043e\u0431 \u0432\u043e\u043d\u0438 \u043f\u043e\u0432\u043e\u0434\u0438\u043b\u0438\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0431\u0430\u0447\u0443\u0432\u0430\u043d\u043e \u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0430\u0445, \u043a\u043e\u043b\u0438 \u0440\u043e\u0437\u043c\u0456\u0442\u043a\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u0430\u0434\u0430\u043f\u0442\u043e\u0432\u0430\u043d\u0430\u00a0\u043f\u0456\u0434 \u0440\u0456\u0437\u043d\u0456 \u0440\u043e\u0437\u043c\u0456\u0440\u0438 \u0435\u043a\u0440\u0430\u043d\u0443 \u0456 \u0440\u0456\u0437\u043d\u0456 \u0434\u0435\u0432\u0430\u0439\u0441\u0438.", "localization_tags": ["inprogress"], "locale": "uk", "last_edit": "2016-03-31T01:56:54", "review_tags": []}, {"uuid": "d7af5ab1-9fe7-4d78-96b4-e35a14880764", "title": "\u4f7f\u7528 CSS \u5f39\u6027\u76d2\u5b50", "url": "/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes", "tags": ["\u5f39\u6027\u5bb9\u5668", "\u5f39\u6027\u9879\u76ee", "\u8fdb\u9636", "CSS", "Flexbox", "\u5f39\u6027\u76d2\u5b50", "\u76d2\u5b50\u6a21\u578b", "Web", "flexbox", "\u6307\u5357", "\u5f39\u6027", "\u8303\u4f8b", "Flex"], "summary": "CSS3 \u5f39\u6027\u76d2\u5b50(<strong>Flexible Box</strong> \u6216 <strong>Flexbox</strong>)\uff0c\u662f\u4e00\u79cd<a href=\"/en-US/docs/Web/CSS/Layout_mode\">\u5e03\u5c40\u65b9\u5f0f</a>\uff0c\u5f53\u9875\u9762\u9700\u8981\u9002\u5e94\u4e0d\u540c\u7684\u5c4f\u5e55\u5927\u5c0f\u4ee5\u53ca\u8bbe\u5907\u7c7b\u578b\u65f6\uff0c\u5b83\u4f9d\u7136\u80fd\u786e\u4fdd\u5143\u7d20\u62e5\u6709\u66f4\u6070\u5f53\u7684\u6392\u5e03\u884c\u4e3a\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-09-08T04:29:38", "review_tags": []}], "modified": "2016-09-20T17:53:40", "label": "Using CSS Flexible Boxes", "localization_tags": [], "locale": "en-US", "id": 200, "last_edit": "2016-08-29T07:32:55", "summary": "The CSS3 <strong>Flexible Box</strong>, or <strong>flexbox</strong>, is a <a href=\"/en-US/docs/Web/CSS/Layout_mode\">layout mode</a> providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Flexible_Boxes_Concept", "title": "Flexible Boxes Concept"}, {"id": "Flexible_Boxes_Vocabulary", "title": "Flexible Boxes Vocabulary"}, {"id": "Designating_a_Flexible_Box", "title": "Designating a Flexible Box"}, {"id": "Flex_Item_Considerations", "title": "Flex Item Considerations"}, {"id": "Flexible_Box_Properties", "title": "Flexible Box Properties"}, {"id": "Properties_not_affecting_flexible_boxes", "title": "Properties not affecting flexible boxes"}, {"id": "Examples", "title": "Examples"}, {"id": "Basic_flex_example", "title": "Basic flex example"}, {"id": "Holy_Grail_Layout_example", "title": "Holy Grail Layout example"}, {"id": "Playground", "title": "Playground"}, {"id": "Things_to_keep_in_mind", "title": "Things to keep in mind"}, {"id": "Browser_compatibility", "title": "Browser compatibility"}, {"id": "See_also", "title": "See also"}], "slug": "Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes", "review_tags": []}