Flexbox - Overview

Advertisements

Previous Page
Next Page  

Cascading Style Sheets (CSS) is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page.

Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.

To determine the position and dimensions of the boxes, in CSS, you can use one of the layout modes available −

  • The block layout − This mode is used in laying out documents.

  • The inline layout − This mode is used in laying out text.

  • The table layout − This mode is used in laying out tables.

  • The table layout − This mode is used in positioning the elements.

All these modes are used to align specific elements like documents, text, tables, etc., however, none of these provides a complete solution to lay out complex websites. Initially this is used to be done using a combination of floated elements, positioned elements, and table layout (often). But floats only allow to horizontally position the boxes.

What is Flexbox?

In addition to the above-mentioned modes, CSS3 provides another layout mode Flexible Box, commonly called as Flexbox.

Using this mode, you can easily create layouts for complex applications and web pages. Unlike floats, Flexbox layout gives complete control over the direction, alignment, order, size of the boxes.

Features of Flexbox

Following are the notable features of Flexbox layout −

  • Direction − You can arrange the items on a web page in any direction such as left to right, right to left, top to bottom, and bottom to top.

  • Order − Using Flexbox, you can rearrange the order of the contents of a web page.

  • Wrap − In case of inconsistent space for the contents of a web page (in single line), you can wrap them to multiple lines (both horizontally) and vertically.

  • Alignment − Using Flexbox, you can align the contents of the webpage with respect to their container.

  • Resize − Using Flexbox, you can increase or decrease the size of the items in the page to fit in available space.

Supporting browsers

Following are the browsers that support Flexbox.

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+
  • Android 4.4+
  • iOS 7.1+
Advertisements