Currently I have an application that is relying on Bootstrap's Grid layout. I originally chose it because it was easy to learn and looked good. However, it didn't handle nesting as well as I thought it would. After investigating and finding out that it used float for all the grid classes, I don't like it as much.

I wanted to replace it, but didn't want to add another CSS framework to my web application (I still think that Bootstrap is great for other things, and wanted to keep the framework). So, I decided to write my own mini-framework using CSS3's flexbox properties. I know there is at least one existing framework called Flexboxgrid, but I don't want to bloat my application. It's also nice and a lot more satisfying to learn and write a set of classes yourself, as long as it doesn't take too much time. I've read some helpful flexbox articles from Team Treehouse and Chris Wright's blog.

Then, I wanted to apply my knowledge to get a basic understanding of how flexbox works. This turned out to be more difficult than I imagined... although I achieved a somewhat desirable layout. The CSS feels "hacky" to me, especially how I set the border and margin on each .flex-row. This jsfiddle is nowhere near a complete version, but rather the first stepping stone. Before I go any further, I want to get some feedback on what I can improve. Here's an example of some of the code:

.flex-row ugliness

.flex-row {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    border: 1px solid gray;
    margin: -1px;

.flex-row is intended to replace Bootstrap's .row.

EDIT: I should also note that I am using AngularJS, and almost all of the information to be displayed will be generated with ng-repeat.

  • \$\begingroup\$ Please include code (or css) in question. \$\endgroup\$ – Caridorc Aug 25 '15 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.