Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
css
web development

How to use Flexbox in HTML

Educative Answers Team

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

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 ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring