Arthur Wang's Blog
Follow me on
  • My General Blog
  • Software Development
    • Latest Articles on Software Development
    • Complete Resources for Developers >
      • Tutorial Information for Developers
      • .NET Developer Blogs
      • Developer Journals and Magazines
      • Developer's Tools
      • Database Development
      • ​Developer Conference and Events
  • Tech
    • Latest Articles on Technology Development
  • Health
  • Money
  • Services
    • Modern Website Design
    • Web Maintenance of Existing Websites Service
    • Corporate Business Consulting Service
  • About
  • Contact
  • Art
  • 中文部落格

The Mobile Friendly CSS Flexbox Comes to the Rescue in the HTML World

3/7/2016

0 Comments

 
The Flexbox is the Responsive Design of the Future
Design a layout that fits all dimensions and devices can be challenging.  No matter what layout system you use, you are using block and inline display types of layout which are generally uni-directional and more restrictive in term of the content flow.  Unlike the block layout model, the CSS Flexbox layout is the latest layout that can address these issues where the directional flow can be specified and automatically rearranged and reordered to fit the available space. If you are already familiar with Bootstrap. You should definitely take a look at Flexbox since in the coming version, Bootstrap 4.0, the Flexbox layout model will be incorporated and it has also been shown to work very well with its existing CSS layout.  It will be to our advantage to get a glimpse of what Flexbox can offer for your web development before it released.

Here are a quick list of advantages and disadvantages:
 
Advantages:
  • Fill the gap where HTML lack of ability to compose complex layout
  • Work well with existing HTML layout or any grid systems like Bootstrap
  • Easy to understand its containership concepts
  • Create vertical layouts become an easy task
  • Dynamic changeable horizontal/vertical layout with the media query
  • Ability to apply to any HTML elements: semantic and non-semantic
 
Disadvantages:
  • Older browsers will not support
  • Different containership concepts need to learn
 
Flexbox is flexible in a way that it also works with all the HTML elements, including semantic [tags define its content] ones, such as <form>, <table> and <img>.  And the magic actually occurs in the CSS portion of the code when you declare this attribute, display: flex;, in the container element as shown below:
​ 
<style>
.container {
    display: flex;
}
</style>

 
In HTML:
 
<div class="container"></div>
 
Another two CSS attributes are flex-direction and justify-content.  The flex-direction property specifies how flex items are arranged in the main container.  It can be arranged in rows or columns counting from left to right or top to bottom.  In addition, it could also be stacked from right to left as "row-reverse", or bottom to up as "column-reverse".   The justify-content property specifies the space between or the alignment of the flex items relative to x-axis and y-axis and its flexibility in its size to have fixed length or fill in the rest of space.  The default value is stretch. 
 
In many occasions,  a vertical layout could be a difficult task to do since it does not have a good way of setting it.  One must know the exact size of the window from the top-level container all the way down into the child elements.  With today's various mobile devices and its range of dimension, Flexbox can make this issue a piece of cake.  This is how we use Flexbox to create the vertical layout. By changing the flex-direct attribute to column and add height to 100%, and add overflow to auto, we can see that the content are stacked vertically according to their height of the flex items.  Please note that we need to set height to 100% for html, body attributes so that the entire browser window can fill the full area of the content.

<style>
 html,body {
    height: 100%;
    overflow: hidden;
}
 .main-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}
.box-left {
    /*width: 300px;  if want fixed width*/
    flex: 3;
    background-color:red;
}
.box-mid {
    flex: 2;
    background-color:yellow;
}
.box-right {
    flex: 4; /* resizable */
    background-color:green;
     display: flex;
    flex-direction: column;
    align-items: center; /*x-axis*/
    justify-content: center;   /*y-axis*/
 
}
</style>
 
<div class="main-container">
    <nav class="box-left">
        left
    </nav>
    <div class="box-mid">
        middle
    </div>
    <article class="box-right">
        right
    </article>
</div>

​Nested Flex Containers

In the above example, the box-right container is actually a nested Flexbox.  This opens an entirely new world of possibilities where it could be nested as many levels deep as needed.  In contrast, many grid systems we use today utilizes "float" as a workaround to do the layout, but it was not really what it intended to.  As a result, we often use it to force the layout that we desired.  Then we have to use the pseudo-elements, before & after, to clear the side-effect due to the use.
Picture
​Fortunately, Flexbox comes to the rescue and simplifies the layout issues.

Flexbox Adjusts Itself in the Responsive Design

When you have multi-column design on your website, it won't look good if each column becomes very narrow when it displays on a smaller device.  It might be a good idea to arrange the sections from a top to down fashion.  In the Flexbox, it will be easy to switch the flex-direction from row to column with the help of media query in CSS.  By detecting the width of the browser, it can flip the direction as shown below:
 
@media (max-width: 768px) {  /* iPad*/
    .container-main {
        flex-direction: column;
    }
}

For Device Widths For Responsive Design: 
device_widths_for_responsive_design.png
File Size: 30 kb
File Type: png
Download File

Conclusion

​The Flexbox is the Responsive Design of the Future.  With new Flexbox attributes, we can gain a great deal of controls on our layout and design.  A few lines of code on query media, we can arrange the entire content from a multi-column design to a single-column layout.  In addition, the workaround of using float and clear is annoying and hacky.  Flexbox provides us with simple, elegant but powerful solutions to do the design.  Despite Flexbox was born in 2009 and its development became abandon and not until 2012, it was revived but the its specification were not available in browsers in the later years.  Now it seems like it's the time for Flexbox to shine.  We will definitely see more about it in this year.

Resources

  • List of Compatible Browsers
  • w3schools Tutorial
  • CSS Flexible Box Layout
0 Comments

    Arthur Wang

    @ArthurWangLA
    MCSD App Builder
    MCSD Web Applications
    ​Member of Windows Insider Program & HoloLens Developer Community & Dev Center Insider Program

    Over 17+ years of  experience in web-based software development & management.  Specialized in Microsoft technology with c# language and its architecture design.  MCSD, MCSE, Microsoft Specialist, MCP + Internet, and B.S. from UCLA

    Archives

    August 2018
    March 2018
    January 2017
    December 2016
    May 2016
    April 2016
    March 2016
    February 2016
    April 2014

    Categories

    All
    API
    Arduino
    ASP.NET
    Cognitive
    CSS
    Database
    Deep Learning
    DevOps
    Electronics
    Flexbox
    HTML5
    IoT
    Katana
    Machine Learning
    Management
    .NET
    .NET Core
    Neural Network
    OWIN
    Programming
    Programming Tools
    Recognition
    Security
    SQL Server
    UWP
    Visual Studio
    Web API
    Web Developer

    RSS Feed

    Latest Articles

© 2014-2020 ArthurWiz.com All Rights reserved. | Home | About |
Protected by Copyscape