Why do many people swear at flex and float? What to use in this case?

Alain Kris2017-09-09 04:34:48

css

Alain Kris, 2017-09-09 04:34:48

I meet many articles that in 2017 layout using flex and float is no longer relevant? In one of the statements there was even something like "not ethical". Since I am a beginner coder, I would really like to understand this topic. Since I used them before, but now I would like to apply something more "ethical" in my work, if you can even say that. So I'm wondering what do you recommend to use as a replacement?

Answer the question

In order to leave comments, you need to log in

11 answer(s)

Ankhena, 2019-05-21
@idontgetit

One parent, 3 children.
The child has a picture and text inside.
Use nth-child and order to change the position of the image.

Vasily Nazarov, 2017-09-09
@vnaz

I meet a lot

Yes, there are many things on the Internet.
If these "articles" weren't full a long time ago , you wouldn't be asking this question here.
Do you know why?
Because in normal sources it would be written
1. Do not use that, because ....
2. Use this instead. Good
articles will also describe the pros and cons of both this and that.

Vladimir, 2017-09-09
@Casufi

Flex is 100% relevant, even IE11 supports it
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid is the near future, you should try it
https://css-tricks.com/ snippets/css/complete-guide...

Eugene, 2017-09-09
@dragonesis

Good afternoon.
You can safely use flex and learn from test cases grids. And rightly said the authors above. We, at our company, support up to ie11, so we use these tools with a clear conscience.
But it's important to be aware of the weaknesses of flex and older browsers, including ie11. Then everything will be fine. As an example, ie11 and old Safari don't support the flex-wrap: wrap property; This property can be used to create a grid of 3x3 blocks for example. In this case, for these versions it would be appropriate to use the property display: inline-block; Which will allow you to get the desired mesh in the standard or close to it.
Also, vertical centering and a couple of advanced features do not work everywhere.
But in general. If in practice to calculate what occurs most often in bugs recorded on flex, then you can carefully bypass them by one means or another. After all, no gridding method is perfect.

Mikhail Derkach, 2017-09-14
@skeevy

I use flex in all my projects.
I just once tried to lay out the header of the site and then it started.
Significantly increased productivity, it helps a lot with adaptive layout.
For example, a site header with 2 or 3 elements
At a resolution of approximately below 768, it doesn’t fit in a line anymore - just change flex-direction to column - the header will be in a column, everyone is happy.
It's the same with axis alignment.
It is much more convenient to swap elements in flex: just write order to child elements - everything has changed.
Perhaps it's just as easy to manipulate float, I haven't used it for long and I don't know all the specifics, but flexbox really makes layout easier

sergski, 2017-09-09
@sergski

Now this is true for float when it is used for layout layouts, a very common technique. But flex is not, on the contrary. Paired with its sister grid, this is the near future of the web. It so happened that in css there was no intended tool for block layout, and in order to somehow live with this, developers came up with sets of tricks / hacks on how to get around it all.
Read better Rachel Andrew , Jen Simmons , Smashingmagazine and so on.
ps. yes, this is cutting edge and all that, the question of use is holivar, but hammer in how you learn grid / flex and start using it carefully, enough articles have already been published on how to start doing real projects with them. Moreover, you are a "beginner layout designer" - so learn the best!

Bogdan Dukhevich, 2017-09-14
@landen13

1. Grids are the future, but only for global layouts. ONLY.
2. Flexboxes are real, they can be used without problems both in local places and for the global layout. IE11+, with some nuances.
3. Float is a thing of the past, but it's still the good old float. Always save and cover your ass in case of emergency. As well as layout on inline-blocks. But FLEX should of course be a priority now, anyway.

FullStack Alex, 2017-09-15
@FullStackAlex

LOL, flex is not relevant?! :D
You can see something mixed up or misunderstood. It is hard to imagine a professional saying that flexbox is not relevant. Yes, it was only a couple of years ago that it became possible to use it.
Flexbox is the coolest thing, though with its own nuances. Especially old browsers sometimes implemented flexbox in their own way - if everything is top in Safari, then it is not necessary that everything will work in IE11 too.
But this complete list of all prefixes I compiled, I think it will greatly facilitate the use:
https://github.com/Tech-Nomad/flex.css/blob/master...

ZoomLS, 2017-09-14
@ZoomLS

I meet many articles that in 2017 layout using flex and float is no longer relevant?

About float - you can say so. But flex - it just started to be actively used only a year ago. CSS Grid and FlexBox are the hottest trends in layout right now. Especially if it is unnecessary to support any junk (IE) or backward browsers (Safari).

zooks, 2017-09-10
@zooks

Now Flex is relevant.
Previously, float was relevant (today it can be used through grids like Susy).
In a few years, CSS Grids will be supported everywhere.
So type it up with Flex. However, it must be tested in all browsers. Because for example, in IE and Safari, the min-height property may be buggy.