I have a variable set of images I'm displaying in a flexbox, and am trying to make sure the images vertically and horizontally align to their parent div. I've tried the usual vertical-align, text-align, max-width: 100%;, and margin: 0 auto;. Any good cross browser solutions to my dilemma that won't lead to warped/left-aligned images?
Here's the CSS (in it's current borky form, I've also tried the other aforementioned centering CSS):
.collage{
max-width: 100%;
max-height: 100%;
height: inherit;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: inline-flex;
flex-direction: column;
}
.collage div{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: inline-flex;
overflow: hidden;
width: 100%;
}
.collage img{
max-height: 100%;
}
jsfiddle: http://jsfiddle.net/hSb93/3/
if you add margin: auto; to .collage img it solves it.
But flexbox is not supported by all browsers.
If you want it to be fully cross-browser you can put a span before the image and put this CSS in it:
CSS
.collage div{
text-align: center;
}
span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
HTML
<div>
<span></span>
<img>
</div>
Related
How to fix specific CSS position scaling in percentages?
The jump occurs during manual scaling in the browser.
code:
jsfiddle: http://jsfiddle.net/y5b576cm/2/
Try avoiding using percentage in width and height as much as you can, they are very messy.
First of all, have your top containers with the same fixed width:
section.h-banner {
width: 66.444%;
position: relative;
margin: 0 auto;
left: -3.666%;
}
then align the child container
.container-header {
text-align: center;
margin: 0px -12%;
left: 12.7%;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
}
but again, very messy..
I'm looking to display a sticky sidebar on my page, positioned relatively when the client is at the top of the document and fixed when the client scrolls.
My problem is with Safari (it seems to work fine with Chrome and Firefox).
I had it working with a set of floating divs (sidebar floats left) but when I changed to flexbox I found that fast scrolling was too fast for the sticky sidebar to keep up (whether detaching itself from its relative position or staying in a fixed position on the page.
Has anyone else encountered a similar issue and found a work around? I'll go back to floats if necessary but as I'm still learning this stuff it would be great to get to the bottom of why flexbox is causing problems.
Thanks! (Code/markup follows)
HTML:
<div class="order-form">
<div class="left-column" id="left-column">
<div class="sidebar" id="sidebar">
<ul id="courses"></ul>
</div>
</div>
<div class="menu" id="menu"><!-- content --></div>
<div class="right-column"> <!-- content --></div>
</div>
JQuery:
$(window).scroll(function() {
stickers();
});
function stickers() {
var sidebar = $(".sidebar");
if ($(window).scrollTop() > 300) {
sidebar.addClass("scrolling-sidebar");
} else {
sidebar.removeClass("scrolling-sidebar");
}
}
Old, unproblematic, CSS:
.order-form {
padding: 0 300px 0 120px;
}
.sidebar {
width: 150px;
font-weight: lighter;
text-transform: uppercase;
display: block;
}
.sidebar.scrolling-sidebar {
position: fixed;
top: 75px;
left: 5%
}
My current CSS file (compiled from Sass, with problems seemingly arising from my use of flexbox):
.order-form {
margin: 50px 0;
padding: 0 5%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
justify-content: flex-start;
position: relative;
}
.order-form .left-column {
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-basis: 0;
-moz-flex-basis: 0;
flex-basis: 0;
-webkit-order: 1;
-moz-order: 1;
order: 1; }
#media (min-width: 992px) {
.order-form .left-column {
margin-right: 5%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-basis: 100px;
-moz-flex-basis: 100px;
flex-basis: 100px;
}
}
I'm using flexbox for a layout. My constraint is that the image must be situated at the middle.
I've made a minimal markup that reproduces the issue: http://codepen.io/anon/pen/xwNomN
It works perfectly well in all browsers EXCEPT on IE 10 and 11, where (as shown in the CodePen) a big amount of empty space is added at the top and bottom of the image.
.collection__list {
display: flex;
flex-wrap: wrap;
}
.product-item {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-item__figure {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 auto;
}
.product-item__figure > a {
display: flex;
position: relative;
flex: 1;
}
.product-item__image-wrapper {
position: relative;
width: 100%;
}
.product-item__image {
display: block;
margin: 0 auto;
max-width: 100%;
}
I've tried a lot of fixes, played with flex-shrink, flex-grow... but after 1 whole day lost, I'd love to know what I'm doing wrong.
Thanks
Oh... I've found it by chance. Adding overflow: hidden to product-item__figure made the trick....
The CSS3 flexbox, or flex, layout allows to easily center an element horizontally and vertically even when its height and width are unknown.
Can the flex layout be used to absolutely position an overlay (of unknown height and width) in the center of a page?
Elements lose their flex item status if they are absolutely positioned. In order to do what you're suggesting, you need to absolutely position the flex container:
http://codepen.io/cimmanon/pen/prFdm
.foo {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: center;
-webkit-box-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.bar {
margin: auto;
}
<div class="foo">
<div class="bar">Bar</div>
</div>
Note that I've omitted the moz 2009 Flexbox prefixes because absolute positioning breaks flex containers in Firefox. It should just work in Firefox versions with the standard Flexbox properties.
in my case it centered an absolute element. browser: Chrome 56.0
https://codepen.io/MarvinXu/pen/WjprpL
.flexbox {
display: flex;
height: 200px;
align-items: center;
}
.abs {
position: absolute;
right: 0;
}
<div class="flexbox">
<span>inline</span><span class="abs">position:absolute</span>
</div>
I am trying to resize an image to be the width of its parent div; normally width: 100%; works fine, but when the parent has display: box; the img is not resized. Giving the child image box-flex: 1 has no effect.
<div style="display: -webkit-box; -webkit-box-pack: center; width: 100%;">
<img src="foo.jpg" style="-webkit-box-flex: 1;" />
</div>
Maybe you have solved this, but you can use (Providing example for mozilla)
IMAGE {
display: -moz-box;
-moz-box-flex: 1;
}
#cont {
-moz-box-orient: horizontal;
display: -moz-box;
}
Haven't tested the example and in worst case you need to make some tweek, but i'm pretty sure it's correct.
Granted this is an old question, however, it still shows up in searches so wanted to update with an answer:
Currently in Chrome 23 and Firefox Nightly 21.0a1 this layout works to keep the image the size of the parent div and resize (along with keeping it centered).
http://jsfiddle.net/qAErr/
HTML
<section id="holdMe">
<div>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5"/>
</div>
</section>
CSS
#holdMe {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
}
#holdMe img {
width: 100%;
}
Browser?
I'm not aware of any browser that supports the flexbox spec without vendor prefixes.
display: -moz-box; and display: -webkit-box; etc.
Actually, I just looked at your code again... if you're using flex on the images, you don't need the width declaration since flex defines width dynamically.
You should also define the width of the parent div.