What is CSS Flexbox and how to use it?

Before the CSS Flexbox Layout module, there were four layout modes:

  1. Block, for sections in a web page
  2. Inline, for text
  3. Table, for two-dimensional table data
  4. Positioned, for explicit position of an element
  • CSS Flexbox is a whole module and not a single CSS property, it involves a set of properties.
  • Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).
  • The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container.
  • The main idea behind the flex layout is to give the container the ability to alter its item’s width/height (and order) to best fill the available space
  • A flex container expands items to fill available free space, or shrinks them to prevent overflow.
  • Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).

 

Working with Flexbox-

  • When working with flexbox we need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.
  • Items will be laid out either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).flex-axis

Properties for the Parent (flex container):

  • display: flex | inline-flex; – Allows us to create a flex container (a flex context for all its direct children),
    • flex-demo-1
  • flex-direction : row | row-reverse | column | column-reverse – Allows us to change the direction in which our flex items display. default is row.
    • flex-demo-direction
  • flex-wrap: nowrap | wrap | wrap-reverse; – Specifies whether the flex items should wrap or not. nowrap is default.
    • nowrap (default): all flex items will be on one line
    • wrap: flex items will wrap onto multiple lines, from top to bottom.
    • wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
    • flex-demo-wrap.png
  • flex-flow: <‘flex-direction’> || <‘flex-wrap’> : is a shorthand property for setting both the flex-direction and flex-wrap properties.
  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; : This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
    • flex-start (default): items are packed toward the start line
    • flex-end: items are packed toward to end line
    • center: items are centered along the line
    • space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
    • space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
    • space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
    • flex-demo-js.png
  • align-items: stretch | flex-start | flex-end | center | baseline; – property is used to align the flex items vertically.
    • stretch (default): stretch to fill the container (still respect min-width/max-width)
    • flex-start: cross-start margin edge of the items is placed on the cross-start line
    • flex-end: cross-end margin edge of the items is placed on the cross-end line
    • center: items are centered in the cross-axis
    • baseline: items are aligned such as their baselines align
    • flex-demo-ai.png
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch; This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis
    • flex-demo-ac.png

 

Properties for the Children (flex items):

 

  • order: <integer>; By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
    • flex-demo-order.png
  • flex-grow: <number>/* default 0 */; property specifies how much a flex item will grow relative to the rest of the flex items. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others 
    • flex-demo-grow.png
  • flex-shrink: <number>; /* default 1 */ – property specifies how much a flex item will shrink relative to the rest of the flex items.
  • flex-basis: <length> | auto; /* default auto */ – 
    • flex-demo-basis.png
  • flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] – is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties
  • align-self: auto | flex-start | flex-end | center | baseline | stretch; flex-demo-align-self.png

 

References-

https://www.w3schools.com/css/css3_flexbox.asp#flex-flow

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

 

Advertisements

How to convert image to black and white using CSS ?

Using CSS filter property we can easily apply the graphical effects like blurring or color shifting to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Below are some common graphical effects-

  • Blur
  • Brightness
  • Contrast
  • Drop Shadow
  • Grayscale
  • Hue Rotation
  • Invert etc…

grauscale

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}

https://www.w3schools.com/cssref/css3_pr_filter.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Programming is Easy…

 

How to set multiple background images using CSS ?

CSS3 allows us  to set multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support : Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Example:- 

#example1 {
   width: 500px;
   height: 250px;
   background-image: url('Image 1 URL'), url('Image 2 URL');
   background-position: center bottom, left top;
   background-repeat: no-repeat;
}

Multiple background images can be specified using either the individual background properties or the background
shorthand property.

Method 1:-
Using individual background properties

#example1 {
   background-image: url('Image 1 URL'), url('Image 2 URL');
}

A comma separated list is also used for the other background properties; background-repeat,background-attachmentbackground-positionbackground-clipbackground-originand background-size.

#example1 {
   background-position: center bottom, left top;
}

Method 2:- Using the ‘background’ shorthand property

#example2 {
background: url('Image 1 URL') center bottom no-repeat, url('Image 2 URL') left top no-repeat;
}

Reference: http://www.css3.info/preview/multiple-backgrounds/

Programming is easy….

How to create mouse over menu without jQuery/Javascript in HTML?

Sometime, we need to display a mouse over menu like in grid to edit/delete rows etc…
It can be done easly by just creating required menu options and set default display style to none and show menu on item’s/rows mouse over in css.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mouse over menu using div/css without jQuery and JavaScript</title>
    <style type="text/css">
        .itemsContainer
        {
            border: 1px solid red;
            height: 300px;
            width: 600px;
        }

        .item
        {
            height: 100px;
            width: 100px;
            float: left;
            margin: 10px;
        }

        .itemsContainer .item:nth-child(odd)
        {
            border: 1px solid green;
            background-color: gainsboro;
        }

        .itemsContainer .item:nth-child(even)
        {
            border: 1px solid gold;
            background-color: lavender;
        }

        .menu
        {
            list-style-type: none;
            margin-top: 0px;
            margin-left: 15px;
            display: none;
        }

            .menu li a
            {
                color: red;
                text-decoration: none;
            }

        .itemsContainer .item:hover .menu
        {
            display: block;
        }
    </style>
</head>
<body>
    <div class="itemsContainer">
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Programming is easy….