I have a number of divs of dynamic height I would like to place into two columns that display immediately after the other, ideally without javascript (and libraries such as packery, masonry etc).
I've begun with display: inline-block jsbin
I've also tried following Easy Masonry Layout With Flexbox to no avail jsbin
I could structure the DOM into separate columns but this isn't ideal as they need to collapse into a single column on mobile.
Of course, simply using inline-block results in an unwanted gap along the lines of this:
EDIT: Updated diagrams to be more clear about desired result - left to right columns with no unwanted gaps
You should set float:left css to all your divs.
<div style="float:left; display:inline-block;">
these divs will be displayed next to each other.
</div>
I hope this will help you.
You can use CSS columns now without worrying too much about browser support. Older IE versions are the only potential blocker, depending on your audience. There are also still quite a few browser quirks to work around, but I've been using them in production for a while now. It's your only real option for a masonry-like layout today, without using JS.
Here is one solution you can use flex for this
CSS
.flex-container {padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; }
.flex-item {background: tomato; padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; }
#fl-item{height:200px;}
And HTML
<ul class="flex-container">
<li class="flex-item" id="fl-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
And you can see working Plunker
Related
I'm new to front end development and currently working on a website project.
It has a simple layout and I'm using CSS Flexbox to execute it. Works well in for example Firefox, and very poorly in Safari. I've done quite a bit of research and found out that Flexbox is not fully supported in older versions of Safari, however I have the newest version. Sizing and positioning doesn't work properly, aligning the items horizontally works.
Below is the desired look of one of the pages, in Firefox:
image
Below is the same page in Safari (it looks the same in Chrome):
image
When zooming out in Safari it looks like this:
image
.container4 {
font-family: "Chakra Petch", sans-serif;
font-size: 40px;
display: flex;
justify-content: center;
align-items: stretch;
gap: 50px;
.element4 {
padding-left: 50px;
padding-top: 50px;
align-self: flex-start;
flex: 1 1 50px;
}
.element4-2 {
padding-right: 50px;
padding-top: 50px;
align-self: flex-start;
flex: 1 1 50px;
}
<div class="container4">
<p class="element4">
Drummer and beat producer from Gothenburg, based in Oslo. The beats are
built around Pers drumming, <br />
using samples from a wide variety of genres <br />
mixed with other sounds.
</p>
<img class="element4-2" src="../Images/galgeberg.png" alt="wall2" />
</div>
Couple of problems:
if you want both columns to be 50% width on all screen sizes, you need to set flex:1 1 50% on both the p and the img tags.
if you want the img tag to scale up and down instead of always being it's full size, you need to set width:100%;height:auto on it.
if you want to center the two elements vertically all you need is align-items:center on their container (where display:flex is defined) and not use any vertical padding on them
As a matter of personal preference I would set display:block on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.
Code:
<div class="container4">
<p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
<img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>
<style>
.container4 {
font-size: 40px;
display: flex;
align-items: center;
gap: 50px;
}
.element4 {
padding-left: 50px;
flex: 1 1 50%;
}
.element4-2 {
padding-right: 50px;
flex: 1 1 50%;
width:100%;height:auto;
}
</style>
Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)
Few things, The align item stretch is causing the issue. also you need to make sure that you are diving the 50% gap for each element, third you have set the max-width of the image to maintain the sizing. here is the jsfiddle with responsiveness.
.container4 {
font-family: "Chakra Petch", sans-serif;
font-size: clamp(30px,20vw+1px,40px);
display: flex;
justify-content: space-between;
padding:2em;
}
.element4{
max-width:50%;
margin:auto;
}
.element4-2{
max-width:50%;
margin:auto;
}
.container4 img{
width:100%;
}
<div class="container4">
<p class="element4">
Drummer and beat producer from Gothenburg, based in Oslo. The beats are
built around Pers drumming, <br />
using samples from a wide variety of genres <br />
mixed with other sounds.
</p>
<img class="element4-2" src="https://www.ejin.ru/wp-content/uploads/2017/09/2-2400-696x392.jpg" alt="wall2" />
</div>
I never had problems using flexbox on modern browsers.
I'm assuming there is some typo/error in your css.
Without the entire code, it's hard to know what will and will not work for your specific layout.
Anyways, my approach would be more like:
.container {
font-family: "Chakra Petch", sans-serif;
font-size: 40px;
display: flex;
flex-direction: row; // makes sure it's treated as row
width: 100vw; // 100 viewport width = fills entire viewport width
height: 100%; // take 100% of available space (since you have a header)
justify-content: center;
align-items: center;
}
.page-paragraph {
margin: 0;
padding: 50px; // padding of 50px all around
}
.page-img {
width: 50%; // image is always 50% of available width
margin: 50px;
}
Any reason you are exclusively using classes?
If an element occurs only once, it's smart to give it an id instead.
You can specify an ID with the '#' selector.
Also scratch the break tags if you are going for a fluid layout,
in some cases you might only have the word 'drumming' in a single line.
I used flexbox properties to make my section look like this:
It works fine on Chrome but I noticed a few differences when I checked firefox and safari.
This is how chrome looks like:
But on Firefox, I am not managing to apply to margin of 1% like I want as the red signal shows:
And on safari, the boxes are all one after the other:
It is a WordPress Site and not live yet. But here is my html structure:
<section id="services">
// here goes the title of the container
<div class="main-container col-lg">
// here go all the box
<div class="services-container">
// this one of the boxes
</div>
</div>
</section>
And the CSS:
#services {
background-image: url("img/Services-background.jpg");
background-color: red;
}
.col-lg {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: initial;
max-width: 100%;
}
.services-container {
color: #d6d6d6;
margin: 1%;
max-width: 100%;
width: 30%;
}
How Can I make this work on all browsers?
The best way to ensure that flex is working equally on all browsers is to use prefixes.
Here's the chart from MDN showing you the different browser prefixes available for flex box (and general browser support notices)
display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms--display: flex;
I strongly suggest you not use flexbox, but floats instead.
Delete all the flex properties your css should look like this:
#services{
background-image: url(img/Services-background.jpg);
overflow: auto;
}
.services-container {
color: #d6d6d6;
width: 30%;
float: left;
margin: 1%;
}
Then you can add the rest of the styling. It will work on all browsers.
Sometimes the HTML version may be the reason (it was in my case):
I looked for <!DOCTYPE html> at the top of the source code. My HTML turned out to 4.0 something and that was the reason (most probably) that flex did not work. Once that was changed, it worked well.
Good luck...
Take a look at this image:
As you can see the 2 end links break out of the anchor container.
This is only happening on an iPad (using simulator to test).
On the desktop it behaves as it should by breaking the words in the other links allowing for more space to distribute the remaining items.
It's as if ios doesn't know how to properly break the text in the first link.
.nav-section {
padding: 0 30px;
}
.nav-section__list {
display: inline-flex;
align-items: stretch;
margin: 0 auto;
}
.nav-section__item {
padding: 0 20px;
}
.nav-section__link {
display: block;
background: red;
}
<nav class="nav-section">
<div class="nav-section__list">
<div class="nav-section__item">
AAAAA AAAA-AAAAAAAA AAAAAAAAA
</div>
<div class="nav-section__item">
AAA AAAAAAAA AAAAAAAAAA
</div>
<div class="nav-section__item">
AAAAAAAAAAA
</div>
<div class="nav-section__item">
AAAAAAA
</div>
</div>
</nav>
Update
word-break: break-all is not a valid solution:
word-wrap: break-all also doesn't work:
This is the same resolution but on a desktop:
As you can see the way the words break is completely different. The iPad just doesn't want to co-operate.
Update 2
I have run into the same issue in another instance of flexbox. It seems like IOS still has some bugs with the implementation.
So I went ahead and used display: table; and display: table-cell; just until the issue is resolved.
If anybody has any other hints as to exactly why the issue might be happening that would be great. Thanks!
Flexbox is relatively new, and browsers may have implemented it a little diferently from each other.
You may be missing the -webkit-prefix, as it looks like safari did need it on some versions.
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: stretch;
align-items: stretch;
Or, maybe you could try using:
word-break: break-all;
To ensure that those words will be broken, and will not overflow.
Must specify Width in nav-section__item
.nav-section__item {
padding: 0 20px;
word-wrap: break-all;
width: 20%;
}
Live Demo
In my experience with safari and flexbox it often helps to just add
display: flex;
flex-shrink: 0;
to the container which is too small. That should guarantee that the container is atleast the size of its contained element.
How can I center-justify a list of links in CSS?
This is similar to this question: How to Center-Justify text in CSS?, except using links instead of text. The fiddle from that answer there (http://jsfiddle.net/L4pzm/) doesn't work when I use links instead of text.
This is how they did it in the above fiddle:
.center-justified {
margin: 0 auto;
text-align: justify;
width: 30em;
}
Here is the fiddle I created: http://jsfiddle.net/hsm4w0p5/
<div class="center-justified"><p>
First Second<br>
Third <a href="4">Fourth Fifth</p>
</div>
As you can see in the example above, the links aren't justified. I want to make it so that the word "Second" is aligned to the right to match with the word "Fifth".
I don't think this is possible using text-align: justify, but can use flexbox to do something similar:
Html:
<div class="center-justified">
<div class="row">
First Second
</div>
<div class="row">
Third <a href="4">Fourth Fifth
</div>
</div>
CSS:
.center-justified {
margin: 0 auto;
width: 30em;
}
.row {
display: flex;
justify-content: space-between;
}
a {
text-decoration: none;
}
http://jsfiddle.net/czcegf2d/1/
Be sure to check the browser compatibility of flexbox (which is quite good these days) and see that it fits your needs. http://caniuse.com/#feat=flexbox
If you don't need to be dynamic you could target each link with the :nth-child(n) CSS selector to float left and right inside the .center-justified container.
like:
.center-justified a:nth-child(2n) {float:right}
This seems to be a common problem in the Bootstrap community, the process of centering and class with an odd number for the span width, class="span3" for example. I have a .row with three .span3 classes inside it. I realize it would be easier to just use three span4 classes, but I'm not a fan of how large it makes my elements.
I've tried a few things so far:
I've created a custom 15-column grid so I could give a .span3 class before and after the three elements I actually want to use, however when responsive-bootstrap.css kicks in, things act strange because the responsive file deals with a 12-column grid.
I've tried placing everything in a custom .center class which uses the following CSS:
.center {
float: none;
margin: 0 auto;
text-align: center;
}
For what it's worth, everything works when my browser width is between ~980px - ~1199px.
There has to be a simple way to fix this problem, right? I'm not worried about it looking good on older browsers either, this is a personal site. Here is where I'm currently at, working with a 15-column grid:
Here is my JSFiddle
The HTML:
<div class="row">
<div class="center">
<ul class="thumbnails" id="portfolio-links">
<li class="span3"></li>
<li class="span3" id="item1">
</li>
<li class="span3" id="item2">
</li>
<li class="span3" id="item3">
</li>
<li class="span3"></li>
</ul><!--/.thumbnails-->
</div><!--/.center-->
</div><!--/.row-->
The CSS:
#portfolio-links {
display: block;
margin: 0 auto;
float: none;
}
.center {
float: none;
margin: 0 auto;
text-align: center;
}
You just have to make the <div class="center"> with a size of span9 and remove the extra li.
The final result will be: http://jsfiddle.net/AKWqP/