Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
flexbox

What is a CSS flexbox?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

A flexbox provides powerful alignment options by giving the user control over properties like alignment, order, and direction.

Some terminology:

  • flex container: groups flex items together to control their representation.
  • flex items: direct children of the flex container.

Properties

There are six container properties:

  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • flex-flow
  • align-content

Let’s see how each of these properties are used:

flex-direction

Determines the direction in which the items ne​ed to be placed.

flex-wrap

Defines if items should wrap or not.

justify-content

Aligns the items.

align-items

Aligns the items vertically.

flex-flow

Sets the flex-wrap and flex-direction together.

align-content

Aligns the flex lines.

To learn more, refer to the official documentation.

RELATED TAGS

css
flexbox
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring