CSS Layouts and Flexbox

- Ritesh Ranjan

CSS BOX MODEL

EVERYTHING IS BOX 

Every element in web design is a rectangular box.

Box Model

Every box have

- Height
- Width

- Padding

- Border
- Margin

How the size of the box is calculated ?

Width

width + padding-left + padding-right + border-left + border-right

height + padding-top + padding-bottom + border-top + border-bottom

Height

What About Margins ?

Margin is unique

Doesn't affect the size of the box but affects other content interacting with the box,

What if these values are not declared ?

Padding and Border

- Browser Default (Not always 0)
- Depends on elements (e.g ol, ul)
- Apply CSS reset to nullyfy

(​http://meyerweb.com/eric/tools/css/reset/)

Height

Default is auto

It takes up the height of the content

What about width ?

This is when things get little Complicated

Block Element + static or relative positioning

Width : 100%,  

Padding and border will push inwards instead of outward.

When width is set

The padding will push the box outward as normal.

The default width of a block element box isn't really 100%

Absolute Boxes with No Width

Width is only as wide as it needs to be to hold the content.

Floated Boxes With No Width

Same as absolute positioned with no width

Take away

For Floated and Absolute positioned block elements set the correct width.

Fixing Width Calculation

box-sizing

Width Calculation

width + padding + border = actual visible/rendered width of an element's box

   What IE<=6 Did right ?

The "quirks" box model

width = actual visible/rendered width of an element's box

box-sizing

box-sizing: content-box; /*Default*/
box-sizing: border-box; /* like quirks box*/

CSS Positioning

Absolute, Relative, Fixed

One More : static (default)

position: relative

Probably the most confusing and misused.

Without positioning attributes (top, left, bottom or right) same as static

With position attributes say top:10px, shifts 10px down from its natural position - NOT VIEW PORT

The ability to use z-index.

Absolutely positioned child within that block.

Absolute

Position attributes are relative to the next parent element with relative (or absolute) 

Not affected by other elements and it doesn't affect other elements.

It break normal flow of arrangement of blocks.

It's overuse or improper use can limit the flexibility of your site.

position: fixed

Element is positioned relative to the viewport, or the browser window.

Misuse can cause serious problems in responsive sites.

floats

Natural flow of arrangement of elements in web page. 

Interrupt the Flow

- Absolute

- Relative

- Fixed

- Float

Valid values of float

• left
• right
• none
• inherit

Float use

Just like the images in the print layout where the text flows around them.

Floated elements remain a part of the flow of the web page. 

Floats can be used to create entire web layouts.

Clearing the Float, but Why ?

The Great Collapse !!

Lets Fix It

Clear the float after the floated elements in the container but before the close of the container.

.clearfix {
  clear: both;			
}

Techniques for Clearing Floats

The Empty Div Method

<div style="clear: both;"></div>

BUT !! No contextual meaning

There purely for presentation !

The Overflow Method

The overflow property isn't specifically for clearing floats

Be careful not to hide content or trigger unwanted scrollbars.

Use Pseudo Element

.clearfix:after { 
   content: " "; 
   display: block; 
   height: 0; 
   clear: both;
}

Thinking in Terms of Grid

Think layout made of "Columns" and "Rows"

Lets Do Some Exercise!

Let's start with a simple 2 column layout

Divide your layout into columns and rows

Grid CSS Frameworks

Bootstrap

960

Foundation

SKELETON

What about being responsive?

With Grid Layout is becomes easy to target mobile devices.

Flexbox

Aims at

providing a more efficient way to lay out, align and distribute space

Container

Give the container the ability to alter its items' width/height (and order) to best fill the available space 

Let's see some examples

Let's see some of the flex properties

.container {

  display: flex; /* or inline-flex */
  
  flex-direction: row | row-reverse | column | column-reverse;

  flex-wrap: nowrap | wrap | wrap-reverse;	

  justify-content: flex-start | flex-end | center 
                    | space-between | space-around;

  align-content: flex-start | flex-end | center 
                    | space-between | space-around | stretch;
 
  align-items: flex-start | flex-end | center | baseline | stretch;

}

.item {
	order: <integer>;
        
	flex-grow: <number>;/* default 0 */

	flex-shrink: <number>; /* default 1 */

        flex-basis: <length> | auto; /* default auto */

	flex: none | [ <'flex-grow'> <'flex-shrink'>? 
                    || <'flex-basis'> ];

	align-self: auto | flex-start | flex-end 
                    | center | baseline | stretch;
}

Flexbox Support

caniuse.com

Vertical Alignment

Why it don't work

vertical-align:: middle;;

Applies to

inline-level and table-cell elements.

vertical-align on block level elements and gives no results

A small div inside a larger div  

vertical-align will not help you center the smaller

What about Aligning Block Elements ?

Line-Height Method

<div id="parent">
    <div id="child">Text here</div>
</div>

#child {
    line-height: 200px;
}

CSS Table Method

<div id="parent">
    <div id="child">Text here</div>
</div>

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

Absolute Positioning and Negative Margin

<div id="parent">
    <div id="child">Text here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Equal Top and Bottom Padding

<div id="parent">
    <div id="child">Text here</div>
</div>

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

Questions ?