It seems like you are using an ad blocker. To enhance your experience and support our website, please consider:

  1. Signing in to disable ads on our site.
  2. Sign up if you don't have an account yet.
  3. Or, disable your ad blocker by doing this:
    • Click on the ad blocker icon in your browser's toolbar.
    • Select "Pause on this site" or a similar option for INITAcademy.org.

Start easy web designing with css flexbox

zooboole

Published on August 20th, 2016 By zooboole

If there is one wonderful thing that happened to web designing in the last decade it's well the CSS flexbox. If you created or tried to create a website before you should know how hard it's to lay it out.

Of course, we have other positioning properties like absolute, fixed, relative, and floating things. Although they're still good, you and I know how complicated it is to use them. Working with them is a big game of probability and it tends to be very hard to reuse one styling in different projects because the content is very flexible. From one project how you display your content varies and even within the same project, different pages can have different ways of displaying content.

It's, therefore, important to get an easy way of laying out content with less hustle.

Although I am not a big front-end guy, many times I had the opportunity to design my own websites and for some of my clients. To be sincere, designing is what takes me more time in all my projects. And I'm sure you too. Designing is not like programming with PHP whereby you can define a task logic once and for all. There is a lot you have to do one by one.

Due to all these, I started to wonder how I could improve my performance in designing. I got myself into sass, gulp built systems, bower components, and so on. I've improved a lot. But, not good enough to make my content display as I used to dream of it. Then I met this post on SitePoint. I followed that, and it was when I was completing this new design of Lancecourse. To test that I applied it on the latest updates on the site's home page:

Lancecourse blog card And here is what the W3 says about Flexbox:

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignments of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

After that, I understood I could go on and play with any design fantasy I want now.

Instead of making a new tutorial on how to use flexbox I have picked some great articles on the subject. I am certain with those you will change your web designing level:

1. A guide to flexbox

2. Centering elements with flexbox

3. The flexbox reading list

4. Using flexbox today

5. Flexible future for web design with flexbox

6. Using CSS flexible boxes

7. CSS flexbox

8. Solved by flexbox

9. A visual guide to CSS3 flexbox properties

10. The ultimate flexbox cheat sheet

Browser compatibility

Can I use?

I don't see much reason not to switch to flex boxes today.

Conclusion

I hope with this little information you know where to start from on your next project. I personally have Chris Coyer's guide open all the time I work. It helps me remember and start to keep in mind all the properties. Besides that, I use flexboxfroggy a lot in order to train myself.

Hope this helps you. If it does please share it with people around you.



0 Comment

Sign in to join the discussion