I am new in front end design and when I was looking information about this I found 2 techniques about positioning: float and flexbox.
My question is: What should I use more? I'm oriented in mobile design too.
As this great article sums up:
Floats
Advantages
Most popular way to lay things out; most grid frameworks follow this.
Everyone's aware of float bugs due to the popularity of floating, and there are well documented ways to overcome them.
Disadvantages
Need to be cleared. Can be quite painful if you're changing widths at 2-3 media query breakpoints, because the floats will need to be cleared that many times.
No vertical centering
No equal heights
No source order independence
Use for:
Large layout blocks that don't need equal heights and vertical centering
Flexbox
Advantages
Source order independence. Could be of tremendous value for responsive layouts and eliminates the need for JS for this.
Vertical centering
Equal heights
Flex boxes move along interchangebly the X and Y axis, with such ease, that you can really change things around with a couple of properties.
Boxes grow and shrink, can be columns or rows, fit to the available space however you wish to declare this.
There are multiple ways to do the same thing with flexbox.
Disadvantages
Syntax is initially unintuitive. You spend the first few hours looking at demos saying WOW, followed by WTF.
I've been noticing weird cross browser inconsistencies [...]
A deep understanding of Flexbox takes a while. Once the layout gets more complex, or you add a couple of divs, things can get confusing. I'm going to document this more in an article.
Lots of vendor prefixes, with a different syntax for older IE and Webkit. Use something like Autoprefixr to work around this. Or write some mixins. Or do something..
Doesn't work on IE9. If you don't have to support IE9, you're fine.
Reports of the older syntax impacting performance. I wouldn't care too much about this honestly, especially if you were using JS to do the things Flexbox now can...
Use for
You can already start using it for vertical centering, if you don't need things to look the same on IE9.
If you don't need IE9 support, it's perfect for source order independent layouts, equal heights.
I would highly recommend using it for personal projects.
App layouts where things need to stretch and squish. Flexbox really shines here.
So to recap', flexbox is the modern way, very powerfull but harder to learn. As it is kind of new, there is also a lot of bugs and it is not seemlessly compatible. floats are the old way: it is more basic, but easy to use.
Related
I read on two different websites (CSS Tricks and MDN) that Flexbox should not be used for large scale layouts. Why would this be seeing that it is being implemented in Bootstrap V4 as a grid system, as well as other Flexbox libraries?
I suspect it is mostly because that is the intended purpose of Flexbox and Grid Layout. As mentioned in the link:
Grid layout doesn’t have content structure, therefore enabling a wide variety of layouts not possible in tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.
Also Flexbox and Grid Layout are both at the Candidate Recommendation stage. The other thing you should remember is that Bootstrap V4 is still in alpha.
A long time ago (4 years to be exact) in a galaxy far(on W3C Standards), far away.... Flexbox was an Candidate Recommendation stage for the first time:P
Browser was supporting it, even IE tried. Front-ends use it to build website and apps with it and nobody cared that it was only Candidate. Candidate always was changing in to proposals and in the end recommendations. Rarely some minor changes was made on that stage.
Then we discover that idea of flexbox was awesome but what we had on the table was pretty much no what we wanted. It was clumsy, not usfull and just wrong.
Huge decision made was. Flexbox get back to Working Draft.
That why, 4 years later everyone is afraid that it will happen again.
https://css-tricks.com/old-flexbox-and-new-flexbox/
https://css-tricks.com/using-flexbox/
The major issue with flexbox is how it loads.
When the server stream content to the browser, it can progressively render it, and when the first item loads, it adjust it to the available space, and then, when the second item loads, it re-adjust, hence both being less performant and cause misalignment and element shifting.
So I recommend to use it where it is needed, not as a replacement of a well structured markup, since that is what a good and well behaved web site should have.
Here is one of many resources, shedding some light on this (and a recording that shows how it loads in comparison with a grid):
https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
I made this answer a wiki, so feel free to contribute with both pro's and con's on whether to use flexbox as an overall layout solution
When learning CSS and making responsive column layouts, I was taught the flexbox method (but also the fact that you should avoid using it too much). Recently, I watched a newer video from teamtreehouse that uses columns, column-counts and so on, to make a responsive column design. Which one is better to use, or is there a third option that is the best?
Edit: Sorry, apparently it's an older video. The reason I'm asking is because it wasn't on my web design track so I wasn't sure whether it was relevant anymore.
Most modern page layouts are moving away from floated columns and migrating to flexboxes. You'll find that even bootstrap 4 are going to be basing their layouts on flexbox.
The main advantage of using flexbox I find is vertical alignment, which is revolutionary. Because before that was one of the biggest pains developers had to face. You can also re-order dom elements which is pretty cool. There's also flex basis, which allows you to have a div with a fixed dimension, and allow other divs to occupy the remainder of the width/height. The possibilities are endless!
TL;DR Flexbox makes your life hella easier. Only if supporting older browsers isn't an issue.
I came across the column-count in our codebase, and was surprised by it, after 6 years of being a frontend dev, I hadn't heard of it. So I dove into it a little bit and also found this thread. To answer the original question above:
When to use column-count
When you are using a lot of text or for instance checkboxes, and you want to order them into columns, column-count is a good option. It basically creates the columned layout of a news paper article for you. So you give the number of columns and the browser will calculate the height. The drawback here is that you often times don't want multiple columns on smaller devices, so you would have to put it within a media query. If you want to know more about it, read this article: https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/
When better not to use column-count
If you want to have more control over your columns and rows, for instance where certain content should go within the column, use flexbox or grid. Also when you don't want columns to have the same width, you are better of with flexbox or grid.
Note that CSS grid is not the same as the old floated columns. It sounds like teamtreehouse used CSS grids.
The CSS grid is a 2d system (rows and columns) while flexbox is 1d (either rows or columns). So they can be used in conjunction, css grids for the page layout and flexbox for the internal detail layout. See :
https://tutorialzine.com/2017/03/css-grid-vs-flexbox
You might want to take a look at Boostrap if you are already comfortable with CSS and want a responsive design. It's easy to pickup. I find it saves me alot of time and effort rather than coding your own CSS for every project.
When working with css you need to constantly think what browsers you want to support, and then choose which features to use. For that there's a handy website http://caniuse.com/
For example in your case you can see that ie8 doesn't support columns http://caniuse.com/#search=columns and neither it supports flexbox http://caniuse.com/#search=flexbox so if you want to support ie 8 I suggest you would use the tipical floated column approach. There's many grid systems out there but I'd go with as suggested above. http://getbootstrap.com/
Can anyone please enlighten me on how the new Flexbox layout model is any better than current tables way? (display:table and all those are includedin my case) ?
It's not supported at all under IE10 which isn't very good for the near future, and I just can't see any benefits over table layout. But still, the internet is starting to get full of "worshipers" of this new CSS method of layout, and all the examples I see can be easily done with normal css without problems.
Update 25.12.15:
I have been using flexboxes a lot since they were introduced to modern browsers and had stopped using display:table and so on, because flexboxes are more powerful and easy to use.
There are three distinctions I can think of between using flexbox and using table display values or floats to layout a page:
Being able to re-order elements irrespective of the HTML source order, while keeping elements in the normal flow - you can do this by specifying an integer value with the order property.
It requires less typing than traditional float layouts (you don't need all of the pseudo-elements for clearing purposes) and is more semantic, while using floats or tables for layouts obviously isn't.
The ability for flex-items to grow and shrink to fill horizontal and vertical space based on an ancestor elements' dimensions - by using the flex-grow and flex-shrink properties.
The problem (as you've pointed out) is that support is still pretty bad; In fact Firefox is still implementing an older version of the flexbox module, so you have to account for minor discrepancies in syntax and behavior, depending on which browser you're using. It has been said quite a bit, though, that it is the future for layouts, especially for complex web apps that are popping up more often. It's worth learning if you're okay with making an inevitably wise investment - at the cost of not really being useable right now.
I also suggest you take a look at this smashing magazine article for a friendly introduction to flexbox (it's fairly recently written)
The Flexbox model is more powerful than display table. Flexbox supports layouts for right to left languages for example. And yes indeed, flexbox is a bit complex and that's an entry barrier. Float and clearfix layouts are a (clever) hack, somehow in the same way table layouts are a hack, flexbox is meant for layout.
The browser support is getting better lately, some say we should use it now. Bootstrap 3 does however not make use of flexbox, but i can imagine that the next version will.
Simply put, it's something that'll be beneficial in a few years. Like many advanced css techniques, HTML5, etc., a few people will adopt them with painful fallbacks and shims/shivs for the next couple of years.
When browsers support it in the future, we'll have a party and all hate on the 'old' browsers that don't support them :).
Flexboxes are more flexible and semantically appropriate since tables were never meant to be used for layout. From MDN introduction to Flexbox:
Why Flexbox?
For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning. These work, but in some ways they're also limiting and frustrating.
The following simple layout designs are either difficult or impossible to achieve with such tools in any kind of convenient, flexible way:
Vertically centering a block of content inside its parent.
Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let's dig in!
I'd like to get some feedback on using padding and margins for page layout versus absolute positioning. I realize that there are and will be scenarious where either or both are preferred and that will depend on the scenario.
But what I'm getting at is overall page layout for pixel perfect designs what is the general rule of thumb? I'm a little more than a year into HTML and CSS and I'm coming from a graphic design background, so most of my train of thought lies heavily on approaching a design from a layout standpoint first. So far in my web designs I have used the rule of thumb to use appropriately titled divs with floats, padding and margins when laying out a page, and if something requires absolute positioning (like an element to be stuck on the edge of the screen or a div) use it when necessary.
But lately I've really been starting to re-think my approach to page layout and wondering if starting with usign absolute positioning as a general rule of thumb is a better idea?
Can somebody point out some good articles or resources on this topic, and I'd love to hear everyone's personal feedback as well.
I can see where you're coming from, but using absolute positioning for your layout is extremely inflexible. I think you'd be best to carry on as you are, using the CSS box model. That's not to say absolute positioning is a bad thing, just that it's not flexible enough to handle fluid layouts, changing box-sizes etc.
I've been learning more and more about CSS layout and its quirks over the last 2 years and I am pretty much using the float/margin technique as it seems to give me the best results across different browsers.
Maybe it was just the way I was doing it, but I have experienced some pain with positioning (absolute inside relative containers) when trying to get the same results in all browsers. IE was usually the outlier and that was mostly with IE6/7. I have hesitations with going straight to absolute positioning, but perhaps others here might have had a better experience and can point you in a better direction.
Good luck and I hope you find something that feels comfortable to you!
As Rowan mentioned, absolute position is to inflexible with all the different devices and screensizes.
What you should do, especially if you come from a graphic background, is using a grid layout in your website designing process that corresponds to a grid framework for webpages, for example bootstrap.
Then you'll get
A: Symmetric and appealing layout
B: Someone that knows this a lot better than any of us that has handled all the problems that floats and margins might cause and that will update the framework in the future to compensate for the turns web development is taking.
One of the arguments I've heard about blueprint css is that it lets you think of your layout in terms of a grid rather than in terms of floats. This seems like a big advantage to me because I always get confused about where my floats are going to end up - sometimes a float will unexpectedly drop down below some other floats and I have a hard time figuring out how to reposition everything. Does this make blueprint css a good choice for me - or should I just put the time in to learn how to use floats properly and do all of my layouts manually?
Yes, absolutely it lets you use a grid - see this example page, which makes the grid visible by striping the background according to the grid columns.
(But I have to say, a little time spent learning how CSS layout really works would pay big dividends - better to understand it than to give up and try to work around it. And you'll then have the option of creating flexible layouts that work well on all sorts of different devices.)
One of the biggest issued with anything that is absolutely positioned is that items that are not absolutely positioned do not know that the absolutely positioned items exist.
Of course this is a debate that will go on forever about which is better but you will probably be better off using elements that can be scaled depending on the browser size and resolution.
Under the hood, Blueprint still uses floats.
Here's a novel approach to creating "float-less" layouts that are semantic and accessble,
http://www.tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no_joke.asp
As stated, BluePrint is a grid system, but is based on CSS floats. So understanding CSS Floats is somewhat important to really grasp what BluePrint does.
I rarely use floats over absolute positioning for a variety of reasons.