{"json_modified": "2016-10-12T13:51:46.826304", "uuid": "54c88413-b38f-4caa-86d4-88840f55eb14", "title": "Flexbox", "url": "/en-US/docs/Learn/CSS/CSS_layout/Flexbox", "tags": ["Guide", "Beginner", "Flexible Boxes", "CSS", "Learn", "Article", "CSS layouts", "CodingScripting", "Flexbox", "flexbox", "Layouts", "Layout"], "translations": [], "modified": "2016-10-12T13:51:46", "label": "Flexbox", "localization_tags": [], "locale": "en-US", "id": 187014, "last_edit": "2016-08-27T04:51:39", "summary": "That concludes our tour of the basics of flexbox. We hope you had fun, and will have a good play around with it as you travel forward with your learning. Next we'll have a look at another important aspect of CSS layouts \u2014 grid systems.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Why_Flexbox", "title": "Why Flexbox?"}, {"id": "Introducing_a_simple_example", "title": "Introducing a simple example"}, {"id": "Specifying_what_elements_to_lay_out_as_flexible_boxes", "title": "Specifying what elements to lay out as flexible boxes"}, {"id": "An_aside_on_the_flex_model", "title": "An aside on the flex model"}, {"id": "Columns_or_rows", "title": "Columns or rows?"}, {"id": "Wrapping", "title": "Wrapping"}, {"id": "flex-flow_shorthand", "title": "flex-flow shorthand"}, {"id": "Flexible_sizing_of_flex_items", "title": "Flexible sizing of flex items"}, {"id": "flex_shorthand_versus_longhand", "title": "flex: shorthand versus longhand"}, {"id": "Horizontal_and_vertical_alignment", "title": "Horizontal and vertical alignment"}, {"id": "Ordering_flex_items", "title": "Ordering flex items"}, {"id": "Nested_flex_boxes", "title": "Nested flex boxes"}, {"id": "Cross_browser_compatibility", "title": "Cross browser compatibility"}, {"id": "Summary", "title": "Summary"}], "slug": "Learn/CSS/CSS_layout/Flexbox", "review_tags": []}