Trusted answers to developer questions

How to use Flexbox in HTML

Get Started With Machine Learning

Learn the fundamentals of Machine Learning with this free course. Future-proof your career by adding ML skills to your toolkit — or prepare to land a job in AI or Data Science.

Flexbox

Flexbox is a module in HTML/CSS that is used to style a number of elementscalled flex-items in a larger container objectcalled the flex-container.

A flexbox has several properties:

  1. display is used to define the flex-container and to specify that something is going to be a flex-container. The display property should be given the value of flex.
  2. flex-direction defines the main axis. The default value is row, i.e., horizontal left to right. Other options include row-reverse, column (i.e., top to bottom), and column-reverse.
  3. flex-wrap defines how to wrap items in lines. By default, this property has the nowrap value, which tries to fit everything in a single line. Other options include wrap, which overflows items into other lines, and reversewrap, which starts from the bottom and overflows items to the lines above.
  4. order defines the order of individual items in the list. By default, items are placed in the order of the source code, but integer numbers can be used with the order property to order items in flex-containers.
  5. flex-grow and flex-shrink define, using a ratio, how many individual items could grow or shrink if required.

Usage

The following example demonstrates how flexbox can be used.

  • HTML
  • CSS (SCSS)

This example shows a few properties of flexbox in use. For instance, using the order property, 2 has been placed after 1 despite being out of position in the HTML file. Also, using the flex-grow property, 3 and 4 have been given double the space the others received. A reverse list has also been produced using flex-direction.

RELATED TAGS

html
css
web development
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?