Skip to main content

CSS FlexBox layout


Today I was trying to understand the FlexBox layout introduced in CSS and was impressed with what a few CSS properties can do to help you solve layout issues. The standard itself has gone through some iterations, but I believe the current one is stabilised and is not likely change completely. Anyway, the layout proposed here helps you align the elements in the DOM tree horizontally and vertically. It also helps you reorder these elements.

To get a gist of what I’m saying, take a look at the below diagram:

Aligning using flexbox.

I have created three elements which are then placed inside a container. Now, there are different ways in which I may want to align these elements; for instance I want these elements to be centered vertically but be aligned to the right horizontally. I can use the float property and try to achieve that. But say if I want these elements to be aligned such that it is equally spaced horizontally, then I might have to add a few more properties and achieve the layout. Instead I can use new properties ‘justify-content’ and ‘align-items’ to achieve this layout. The ‘justify-content’ property is used align the elements in the container horizontally and it can take the values – ‘center’, ‘flex-start’, ‘flex-end’, ‘space-between’ and ‘space-around’. Similarly the property ‘align-items’ can be used to align the elements vertically and it can take the values ‘center’, ‘flex-start’, ‘flex-end’, ‘baseline’ and ‘stretch’. Also, one needs to set the display property to flex.


There is another property called ‘flex-direction’ which allows you to change a row to a column i.e. the elements would be aligned vertically. It is also possible to reverse the direction i.e. the last element in the container would appear first in the list. This property can take the values – ‘row’, ‘row-reverse’, ‘column’ and ‘column-reverse’. As observed in the above code block these properties are vendor specific and hence they are prefixed accordingly.

I thought of creating and inserting images into this post, but instead I have a created a demo page where you can see these properties in action:






As of now these properties are supported only on Chrome 21+ and not available in any other browser.
Labels:

Comments

Post a Comment

Popular posts from this blog

File upload and Progress events with HTML5 XmlHttpRequest Level 2

The XmlHttpRequest Level 2 specification adds several enhancements to the XmlHttpRequest object. Last week I had blogged about cross-origin-requests and how it is different from Flash\Silverlight's approach .  With Level 2 specification one can upload the file to the server by passing the file object to the send method. In this post I'll try to explore uploading file using XmlHttpRequest 2 in conjunction with the progress events. I'll also provide a description on the new HTML5 tag -  progress which can be updated while the file is being uploaded to the server. And of course, some ColdFusion code that will show how the file is accepted and stored on the server directory.
18 comments
Read more

How to use the APP_INITIALIZER token to hook into the Angular bootstrap process

I've been building applications using Angular as a framework of choice for more than a year and this post is not about another React vs Angular or the quirks of each framework. Honestly, I like Angular and every day I discover something new which makes development easier and makes me look like a guy who built something very complex in a matter of hours which would've taken a long time to put the correct architecture in place if I had chosen a different framework. The first thing that I learned in Angular is the use of the APP_INITIALIZER token.
Post a Comment
Read more

On GraphQL and building an application using React Apollo

When I visualize building an application, I would think of using React and Redux on the front-end which talks to a set of RESTful services built with Node and Hapi (or Express). However, over a period of time, I've realized that this approach does not scale well when you add new features to the front-end. For example, consider a page that displays user information along with courses that a user has enrolled in. At a later point, you decide to add a section that displays popular book titles that one can view and purchase. If every entity is considered as a microservice then to get data from three different microservices would require three http  requests to be sent by the front-end app. The performance of the app would degrade with the increase in the number of http requests. I read about GraphQL and knew that it is an ideal way of building an app and I need not look forward to anything else. The GraphQL layer can be viewed as a facade which sits on top of your RESTful services o...
Post a Comment
Read more