Introduction to the CSS Flexbox.

Posted by admin at March 11, 2020

A website’s User Interface (“UI”) has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content.

CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers.

Use display: flex to Position Two BoxesPassed

This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.

Placing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page.

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

 #box-container {
    height: 500px;
    display:flex;
  }

  #box-1 {
    background-color: orange;
    width: 50%;
    height: 50%;
    text-align:center;
    color:#fff;
  }

  #box-2 {
    background-color: green;
    width: 50%;
    height: 50%;
    text-align:center;
    color:#fff;
  }

Use the flex-direction Property to Make a Row

Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.

Other options for flex-direction are row-reverse and column-reverse.

Note: The default value for the flex-direction property is row.

Just add the flex-direction: row-reverse to reverse the rows.

 #box-container {
    height: 500px;
    display:flex;
   flex-direction:row-reverse;
  }

For Making the box vertically stacking change flex-direction to the #box-container element, and give it a value of column.

 #box-container {
    height: 500px;
    display:flex;
   flex-direction:column;
  }

---