March 1Mar 1 Administrators CSS Flexbox CSS Flexbox (Flexible Box Layout) CSS Flexbox is short for the CSS Flexible Box Layout module. Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way. Flexbox makes it easy to design a flexible and responsive layout, without using float or positioning. Item 1 Item 2 Item 3 Item 4 Item 5 Try it Yourself » Flexbox vs. Grid CSS Flexbox is used for a one-dimensional layout, with rows OR columns. CSS Grid is used for a two-dimensional layout, with rows AND columns. CSS Flexbox Components A flexbox always consists of: A Flex Container - The parent (container) element, where the display property is set to flex or inline-flex One or more Flex Items - The direct children of the flex container automatically becomes flex items A Flex Container with Three Flex Items The element below represents a flex container (the blue area) with three flex items. Item 1 Item 2 Item 3 Example A flex container with three flex items: <html><head><style>.container { display: flex; background-color: DodgerBlue;}.container div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px;}</style></head><body><div class="container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div></body></html> Try it Yourself » You will learn more about flex containers and flex items in the next chapters. ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.