Sobes.tech
Interview Help
Resources
Interview Preparation
Resources
Job Search
Resources
Legal
Back to questions
Junior

What is Flexbox?

sobes.tech AI

Answer from AI

Flexbox (Flexible Box Layout) is a one-dimensional layout model in CSS designed for distributing space between items in a container and powerful alignment capabilities. It allows easy management of sizes, order, and alignment of child elements (flex items) within a parent container (flex container), regardless of their original order or sizes.

Key concepts of Flexbox:

  • Flex container: An element with display: flex or display: inline-flex. The layout rules for its direct children are defined in this container.
  • Flex items: Direct children of a flex container. Flexbox properties are applied to them to determine their behavior within the container.
  • Main axis: The axis along which flex items are laid out. By default, it is horizontal (left to right), but it can be changed with flex-direction.
  • Cross axis: The axis perpendicular to the main axis.
  • Main start / Main end: The start and end points along the main axis.
  • Cross start / Cross end: The start and end points along the cross axis.

Main properties of Flexbox for flex containers:

  • display: Defines the element as a flex container (flex or inline-flex).
  • flex-direction: Defines the direction of the main axis (row, row-reverse, column, column-reverse).
  • flex-wrap: Determines whether flex items wrap onto a new line/column if there is not enough space (nowrap, wrap, wrap-reverse).
  • justify-content: Aligns flex items along the main axis (flex-start, flex-end, center, space-between, space-around, space-evenly).
  • align-items: Aligns flex items along the cross axis (flex-start, flex-end, center, baseline, stretch).
  • align-content: Aligns lines of flex items (if there are multiple due to flex-wrap) along the cross axis.

Main properties of Flexbox for flex items:

  • order: Defines the display order of flex items (default is 0).
  • flex-grow: The growth factor of a flex item, determining how much it can grow to fill available space.
  • flex-shrink: The shrink factor of a flex item, determining how much it can shrink to avoid overflow.
  • flex-basis: The initial size of a flex item before free space is distributed.
  • flex: A shorthand for flex-grow, flex-shrink, and flex-basis.
  • align-self: Overrides align-items for a specific flex item.

Example usage:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Make the container a flex container */
  justify-content: center; /* Center items along the main axis */
  align-items: center; /* Center items along the cross axis */
  height: 200px; /* For demonstration of alignment */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Main advantages of Flexbox:

  • Convenient alignment of elements horizontally and vertically.
  • Flexible distribution of space between elements.
  • Easy reordering of elements.
  • Responsive design without using float and position.
  • Good support in modern browsers.
PreviousNext