CSS FlexBox is explained in a different way

I am a great fan of flexbox CSS display. The moment I read about it the first time, it caught all my attention. And now I always try to use it for my UI/UX design in approximately every project for displaying purposes. There is a strong reason for it too because flexbox provides so much control for a developer to make the design responsive for both mobile and desktop. And it has a great adjustment to different layout designs.

The purpose of my discussion here is to show you a different perspective of flexbox which I have used in one of the projects I had been assigned. The difficulty I faced there was to manage the different form fields lying horizontally parallel to each other at the same time. Some buttons align on the right side of the UI/UX design.

But I have come up with a solution. As everyone knows that flexbox is unidirectional, for both horizontal and vertical alignments we need to use the grid, but I came up with a technique by which I use flexbox as a multidirectional. And the results are amazing. Now I can use multidirectional flexbox to develop Web pages more effectively.

Invoice Form

For this invoice form, I have to manage six columns of input fields which are very diverse in nature like we have auto completes, dropdowns, date pickers, and one field with two input fields in the same row, one dropdown and the second one is simple to input field. In addition to this when this form is used for edit purposes we have some buttons and a chip also which i have to adjust on the right side of the form. But here first I will discuss this layout first so it would be easy for you to understand the adjustment of that later.

Code for invoice form

What I did here is I use the angular flexbox directive to defined a row first. This row will work as a parent element for the invoice form. For this one parent row element, I have defined a column with flex 100 so for each column, we have three input fields that are divided equally to flex 33 but here I have to adjust space so I used flex 25. So same goes for the second column of the form whose parent element will be the same row and that parent element has a second column of three input fields.

Second column codes

The same goes for third column and it’s share of buttons and chip items. So that’s how I adjusted the flexbox in multidirectional UI/UX design maybe that’s not an optimal solution here but my approach is to see the experiment the display method in a different way.

Conclusion

Although we use to read a lot about flexbox that they are unidirectional but we can use them in mulitdirectional display design and achieve amazing results.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store