Web Layout With Flexbox

Web designers are using flexbox to complete our design. Have you heard about flexbox? and what is flexbox? let's see the explanation.

 

1. What Is Flexbox ?

 

Flexible Box Layout Module or Flexbox is a set of CSS properties that combine to lay out content. Flexbox is CSS layout techniques works for the modern web. There was no layout technique that worked well with responsive web design before. Plenty of hacks has been floating around like setting elements to display inline-block and allowing them to wrap of problems for flexible sites. For this reason, many responsive websites use JavaScript.

 

2. What Is Flexbox For ?

 

Flexbox is described by the W3C as being intended for laying UI elements like menu items. Grid Layout is considered to be the most appropriate technique for full page layouts.

 

3. Styling Components

 

Flexbox is ideal for styling components on a page. The flexbox specification divided into two parts, one set of properties that refer to the container element and one set refer to the elements.

 

4. Browser Support

 

Browser support is several different version of flexbox that all need to be catered.

 

5. The Secret of Understanding Flexbox

 

All layout on the web used a cartesian system of x and y. Flexbox contrast is a vector. Flexbox is a vector, meaning we define a length and we define an angle. Flexbox terminology is initially complex.

 

6. Modern Web Layout With Flexbox

 

Flexbox is an option for laying out content.

 

7. Getting Srated

 

First, this is markup and some basic style for the page :

Flexbox Demo

  • A
  • B
  • C
  • D
  • E
  • F
  • G

Div the id page and have unordered list of news items.

 

8. Changing The Content Order

 

The first thing is to move to header up to the top of the page and assign an order to each of pages child elements. Look that


#page {
  display:flex; 
} 

#page {
  display:flex; flex-flow:column; 
} 

#header {
  order:1; 
} 

#news {
  order:2; 
}

#footer {
  order:3; 
}

Complex content wrapping
You need to make room for the text and image like this :


#news { 
  order:2; 
  display:flex; 
}

.newsItem { 
  min-width:300px; 
  min-height:250px; 
  background:#79797B; 
  border:1px solid #706667; 
}


Mixing flexbox and media queries

The last element is style the footer. you must set the paragraph like this :


#footer { 
  order:3; 
  display:flex; 
  align-items:baseline; 
  flex-direction:row; 
}

#footer > * { 
  flex:1; 
}

#footer > p { 
  flex:2; 
  padding-right:2em; 
}


The power of flexbox is that its properties can be combined to give us precise control over our layouts, with the simplest possible syntax.


That was the explanation about Web Layout With Flexbox and if you know information about Software Engineering, Problem Solving, Tutorial, you can visit at www.41studio.com/blog.


source : https://www.webdesignerdepot.com/2015/09/modern-web-layout-with-flexbox/



Ruby On Rails Blog and Web Development | 41studio

By Admin on May 24, 2017