Posts

Showing posts from June, 2018

CSS Flexbox Layout

Image
CSS Flexible box layout Read CSS Display Normally, we achieve the above layout using floats. By using CSS flexbox layout technique we can also achieve the same. But then, why do we need to use CSS Flexboxes technique In a precise answer, 1. Flex layout is an alternative to our ‘floats’ method 2. CSS Flexbox gives us way to control the alignment, direction and order and sizes of the elements placed in the HTML layout. We will look into that in detail one by one in the rest of the article Flex box layout is a set of Basic components of CSS Flex box layout 1. Flex containers 2. Flex Items Browser compatibility CSS Flex is supported by all mordern browsers like Chrome, firefox, Safari, iOS Safari and Opera. Only partial support is extended by IE 11 for CSS Flex as it based on older specifications. Display:Flex We need to make a containing wrapper to flex container. We can do that by CSS, display:flex; Inorder to achieve backwards compatibility, dis