I am designing a webpage in which <figure> elements are dynamically added to a flexbox. These figures each contain an image which can be of any size and aspect ratio as well as a <figcaption>. The flexbox has justify-contents: space-between, and it is my intention that it should be populated with an indefinite number of horizontally arranged, evenly-spaced figures. The following code works perfectly on Firefox (at least as far as I can tell):
<html>
<head>
<style>
div {
display: flex;
justify-content: space-between;
}
figure {
background-color: teal;
}
img {
max-width: 25vmax;
max-height: 25vmax;
}
</style>
</head>
<body>
<div>
<figure>
<img src="http://placekitten.com/g/800/600">
<figcaption>
Caption goes here
</figcaption>
</figure>
</div>
</body>
</html>
There is a script to dynamically add new figures, as demonstrated here: http://codepen.io/anon/pen/jEzyyo.
The issue is that to make room for new figures, Chrome shrinks the width of all the figures in the div (though the content of the figures is unchanged, which is what I want), and so the spacing is thrown off and images end up overlapping. How can I get around this?
Instead of
div {
display: flex;
justify-content: space-between;
}
Use this CSS:
div {
display: inline-flex;
justify-content: space-between;
}
Related
I have the following grid of thumbnails (links to other pages) and I'm displaying them using a flexbox.
As you can see on the left since one of the images doesn't have the same aspect ratio, it doesn't fit correctly. I want it to fill that whole available space (essentially scale so it fills it and "crop" the overflow.)
The container css is this
display: flex;
flex-direction: row;
flex-wrap: wrap;
And each element has
flex-basis: 20%;
What css can I add to get the behavior I want?
In case it's relevant I'm actually doing this in React where the elements are loaded dynamically, and the css is actually a CSSProperties object, but on the client side it's just rendered as normal css so I believe any css-based solution will still work. Thanks!
I think you are looking to stretch the height of any elements that do not fit the aspect ratio that are within the flex container correct?
If I am incorrect, or this does not work for your needs, let me know and I will remove this answer.
You could just add a max-width of 20% or a calculated percentage that does not exceed 1/5th the view width to the flex containers child element. Then add object-fit: fill.
body * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flex-parent {
display: flex;
flex-wrap: wrap;
}
.flex-child {
max-width: 20%;
object-fit: fill;
}
<div class="flex-parent">
<img class="flex-child" src="https://picsum.photos/300/200">
<img class="flex-child" src="https://picsum.photos/200/200">
<img class="flex-child" src="https://picsum.photos/200/200">
<img class="flex-child" src="https://picsum.photos/200/200">
<img class="flex-child" src="https://picsum.photos/200/200">
<img class="flex-child" src="https://picsum.photos/300/200">
</div>
I'm trying to achieve the following layout with dynamic content:
code:
.container {
display: flex;
flex-direction:row;
justify-content:space-between;
}
<div class="container">
<span>Published</span>
<span>Song title</span>
<span>Edit song</span>
</div>
What would be the best way to go about it, taking into account that sometimes the texts in each span don't always appear, I want they layout to be fixed so that even if one of the texts doesn't appear they always remain in the same place. Thanks!
The original code above I tried with display:flex doesn't work because when the text doesn't appear the grid collapses.
add the following css
.container {
display: flex;
flex-direction:row;
justify-content:space-between;
}
https://jsfiddle.net/hxazcg71/
I'm having a lot of trouble setting a div to appear under another div (like they do normally).
I'musing MaterializeCSS. My layout is as follows:
<div class="container valign-wrapper">
<div class="customClass"></div>
<div class="customClass"></div>
</div>
And css:
.valign-wrapper{
display: flex;
align-items: center;
}
.customClass{
margin: 0 auto;
/* text and font css */
}
However , even adding width:100% or changing display class won't make the two divs appear vertically, they appear side by side. I found out that removing valign-wrapper class will work, but my items will obviously appear at the top of the site...
If anyone has encountered the same problem I would appreciate the help!
You need to add the flex direction:
.valign-wrapper { flex-direction: column; }
That way, flex items are positioned as a column. Alternatively, if you need to go with flex-direction: row; (default), you can use
.valign-wrapper { flex-wrap: wrap; }
.customClass { flex-basis: 100%; }
to still maintain the row style but have your two items wrap and eventually positioned above each other.
Even though the post is from 2013, it still teaches the magic of flexbox in a nice way and I can just recommend everyone to read about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have three columns within the flex box container, two visible and one hidden. The first two have very little content; the third one has several pages of content. I want all three to be initially vertically centered, but since the third one will overflow off the page, I want it (when made visible) to end up filling to the top of the page and then scrolling down. How can I have centred items in the flex box that overflow naturally in this way?
What's happening now in my code below is that when the third column is made visible, it overflows off the top and bottom of the page, without scroll, so that its impossible to read the first part of the content.
HTML:
<div class="flex-container">
<div class="column column-left">
column one
</div>
<div class="column column-right">
column two
</div>
<div class="column-hidden column" data-id="1">
column three
</div>
</div>
CSS:
body{
margin:0;
}
html, body{
height: 100%;
}
.flex-container{
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.column{
padding: 0 1em 0 1em;
}
.column-left{
display: visible;
}
.column-right{
display: visible;
border: none;
text-align: left;
}
.column-hidden{
display: none;
}
Javascript:
//clicking on button does the following to show hidden column
$('.column-left').removeClass('column-left').addClass('column-hidden');
$('.column-right').removeClass('column-right').addClass('column-left');
$(".column[data-id='" + id + "']").addClass('column-right').removeClass('column-hidden');
Played a bit with your code. I rearranged align-items from .flex-container to .column, which is also display: flex;. For scrolling I think you should have additional absolutely positioned container for the content.. I used P.
Sample here http://codepen.io/vkjgr/pen/gpqLLZ
p.s. Some hints about your code. flex-direction's initial value is row, so you don't have to write it. And visible is not a property of display ;)
I've been trying to learn something about CSS flexboxes, specifically to get a sticky footer working, based off this example.
The layout is 3 basic divs: a header, main content and footer. The main content div is supposed to expand vertically such that the footer is always at the bottom of the page. In Safari, the page loads as expected, but resizing the window vertically does not adjust the height of the layout (i.e. nothing's moving) — if I make the window taller, the extra space in the main content div doesn't change to keep the footer at the bottom, likewise . Resizing the window horizontally does reflow the page properly. Everything does work as expected in Chrome.
The example page works as I would expect, and I've followed the example CSS closely (using Autoprefixer's live demo). Comparing the pages in web inspector, the flexbox CSS appears to be consistent, and the only (seemingly) relevant difference is the live code on the example uses min-height: 100% for the flexbox container, whereas mine (and the example code given) uses min-height: 100vh (using 100% didn't work at all for me).
So my question: what is the example site doing differently that mine isn't, and why? Secondarily, why does min-height work in percentages for one, but only viewport units for another?
My code (also on jsfiddle):
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Header Test</title>
<style type="text/css">
body {
font-family: Avenir, sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
margin: 0;
min-height: 100vh;
}
div {
width: 100%;
}
div p {
margin-left: 1em;
margin-right: 1em;
}
div.header {
background-color: orange;
text-align: center;
}
div.main {
background-color: grey;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
div.footer {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="main">
<p>Lots of text here</p>
</div>
<div class="footer">
<p>Footer text here</p>
</div>
</body>
</html>
Thanks to some help from the developer of the site I took the example from, I discovered the cause of my problems: the html element didn't have any height set, thus the min-height on body didn't have any effect. Setting html { height: 100%; } resulted in the expected behaviour.
I admittedly still don't fully understand the why of what caused the initial layout and horizontal resizing to work, but vertical resizing not to, but this at least solves the problem. There was some suggestion from the developer that Safari has some bugginess related to using vh measurements, so that may be it. If anyone can shed some light on that issue, by all means go for it.