FMI, old flexbox doesn't support flex-wrap property. There's no wrap in old browsers such as Android 4.3 and Safari 6.
It shows some flex container children in one line and crop the remaining ones.
What are the alternative/fallback solutions?
http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
Just don't use Flexbox and try to solve your layout-problem with CSS that's got a lot wider cross-browser-support (especially backwards) and degrades gracefully for non-supporting browsers without the need for Javascript to somehow make it work.
You can use Modernizr Script to detect whether browser supports flex-wrap property, then you can create fallback solution.
Link to official page: https://modernizr.com/docs
Great article: http://www.westofwonder.com/2014/02/cross-browser-flex-box-for-responsive-design/
If you want flex-wrap alternative, you should use display: inline-block;. However display: inline-block; isn't perfect. So, you should devise the markup like the following code.
<div class="list">
<div class="list__flex-container">
<div class="list__flex-item">Item 1</div>
<div class="list__flex-item">Item 2</div>
<div class="list__flex-item">Item 3</div>
</div>
<div class="list__flex-container">
<div class="list__flex-item">Item 4</div>
<div class="list__flex-item">Item 5</div>
<div class="list__flex-item">Item 6</div>
</div>
</div>
Related
I'm using Bulma. Consider the following HTML
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
Login now!
Register now!
</div>
</div>
</div>
</div>
Now, the title is centered but the buttons aren't. Of course, if we set display: block; to the div which groups together the buttons, they get centered as well. But I couldn't find any example and I'm not sure if that's the way to go here.
Is there a more "Bulma-like" way of solving this problem?
I'm not sure about that.
I tried to reproduce the issue but it seems that the buttons are centered.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet"/>
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
Login now!
Register now!
</div>
</div>
</div>
</div>
Maybe there are other rules that overrides this behavior?
EDIT:
It seems that in the same version between 0.4.0 and 0.8.0 they take advantage of the flex box layout.
In the example that you shared the buttons class has the display: flex-box but it miss the property justify-content: center; for centering the content of that div.
I don't know if it is the expected behavior or a bug.
Here a working example: https://jsfiddle.net/gix_lg/73vmofqa/1/
Have you tried " is-vcentered" instead of "has-text-centered" ?
Also, you can use empty columns by using a div with a class="column" to create horizontal space around .column elements, or use .is-centered on the parent .columns element
Have you tried to inspect your page to see the css?
Is this behaviour somehow possible:
The structure:
<div class="col">
text…
<div class="image two-col-width"></div>
</div>
<div class="col">
text…
<div class="image"></div>
<div class="image two-col-width"></div>
</div>
<div class="col">
text…
</div>
the columns are using float
As far as I can see this is not possible with css.
Even with multiple columns this will not work because column-span accept only none or all.
Is there any workaround like a javascript plugin to make this work?
Thanks a lot
It's indeed not possible to do it with floats only because the float columns can't track or calculate the size of the colored divs going cross column. However this is easily achievable with Flexbox.
I love bootstrap, but i'm trying to achieve something totally outsides its expected grid, which is to have cells stack under each other without grouped lines. Something like Pinterest, if you will.
Bootstrap normal grid:
Bootstrap no rows concept:
Perhaps the correct answer is "don't use bootstrap" but having built many sites with it, I would love to continue using it and find a way around this.
If indeed i should use another responsive framework with a grid system more like what I need, what would you recommend?
tia
I've worked on a similar problem for a nested drag'n-drop box api with goal to be compliant with bootstrap grid on final render, the builder wasn't a bootstrap grid but a home made similar paradigm of bootstrap grid and I've fixed it with the CSS3 marvelous flexbox
take a look at Solved by flexbox
I have putted a root row (only one for multiline) and added a class to it which implement
display: flex;
flex-wrap: wrap;
eg:
<div class="row flex-row">
<div class="col-6">Variable height content</div>
<div class="col-3">...</div>
<div class="col-12">...</div>
<div class="col-3">...</div>
...
</div>
and the css
.flex-row{
display: flex;
flex-wrap: wrap;
}
this will have the effect to adjust automatically the height of all the box that is on same line to the bigger one
Looks like you have to use JS to reach goal.
You can use following libs:
Jquery Wookmark - Light weight and fast. Used in myself resolving similar issue
Isotope - Flexible and reach functions one
Mansonry - Popular lib, similar to Isotope
You could try inverting columns and rows in bootstrap.
<div class="row">
<div class="col-sm-4">
<div class="row">Some content here</div>
<div class="row">Some content here with more text than the first content but it still needs some more</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
</div>
<div class="col-sm-4">
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
</div>
</div>
Here is a jsfiddle of this.
The key thing to realize about the col-(size)-(gridsize) is that they will wrap left to right then top to bottom. So, if you make a col with a grid size less than 12, other col will begin to wrap around. You can also nest them as needed to split up the page. So, it's possible to create a 'rowless' layout like so:
(this isn't an amazing demo but it illustrates that what you want is possible)
http://jsfiddle.net/7575A/1/
you can use row in col and then but new cols in these rows
if you have problem in padding make your
classes no-padding / no-left-padding / no-right-padding
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
</div>
CSS:
.banner:nth-of-type(1) {background-color:red;}
.banner:nth-of-type(2) {background-color:blue;}
HTML:
<div id="container">
<div class="copy">copy 1</div>
<div class="banner">banner 1</div>
<div class="copy">copy 1</div>
<div class="banner">banner 2</div>
<div class="copy">copy 1</div>
<div class="banner">banner 3</div>
<div class="banner">banner 4</div>
</div>
Shouldn't the CSS be counting the .banner elements regardless of the other sibling elements?
I'm expecting banner 1 to have a red background and banner 2 to have a blue background, but getting banner 1 with a blue background and banner 2 with no background -- I would expect this if I were using nth-child(n). Check my fiddle here: http://jsfiddle.net/JjNBV/3/
nth-of-type applies to the type of element -- ie <div> in this case, not to the class.
.banner:nth-of-type(1) doesn't match anything because none of the .banner elements is the first div inside the container.
.banner:nth-of-type(2) matches the first .banner element because it is the second div inside the container.
There isn't a CSS3 selector that matches classes in the way you're expecting.
If you want this kind of behaviour, you will need to use different element types for your banners and copy, then nth-of-type will work for you as you want. HTML5 provides several elements that may meet your needs in this regard.
Which elements you use would depend on what you're using them for; your supplied code doesn't give sufficient clues for me to give you a definitive recommendation, but here's your code with the copy elements changed from <div> into <article> elements...
<div id="container">
<article class="copy">copy 1</article>
<div class="banner">banner 1</div>
<article class="copy">copy 1</article>
<div class="banner">banner 2</div>
<article class="copy">copy 1</article>
<div class="banner">banner 3</div>
<div class="banner">banner 4</div>
</div>
With this change, your existing CSS should now work as you expect. (and here is the jsFiddle to show it working)
CSS4 does have a selector nth-match() which may possibly also do what you're looking for, but no browsers support this selector (nor are any looking likely to in the near future), so that's not really an option for the time being.
Try
.copy:nth-child(n+1) {background-color:red;}
.banner:nth-child(n+2) {background-color:blue;}
Fiddle here
I am using the isotope plugin on my site which is in local development. I'm running into a css problem which i'm hoping someone will be able to help me with. Here's the situation.
<div class="wrapper"> //* Position is relative
<div class="portfolio1"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio2"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio3"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio4"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
</div>
This pretty much lays the portfolio items out in a grid. My problem is that I have a comment system inside which adds the comments inline. When this happens the ".portfolio" class slides underneath the remaining items on the page. Is there a way either through css or jquery that can remedy this problem? I understand that you can position the elements with relative and float them to keep them from running underneath, but as soon as you do that then the isotope plugin breaks down. Here's a screen shot of the problem as well.
Screen Shot
Cheers,
Mike
I'm guessing the comments are inserted with Ajax? Maybe there's some CSS attached to them that could be overridden to position them differently and keep them within their divs.
Just as likely, though, you shouldn't use Isotope for this. If you're using isotope just to create grid there are simpler ways to do that (you might only need to use float). Isotope does some very fancy footwork, does it differently in different browsers and really likes to work on elements with a nice, specific size. If the comments are getting added with javascript, changing the divs at the same as as Isotope is trying to calculate how it's going to move things around for the layout, you're going to run into trouble.