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....
Related
Does anyone know how I can get all the h4s in this pen to align? I'd like all the icons to be on the same line, and also the h4s to start on the same line as well. I've tried messing with the flex baseline property but no luck.
Each flex item has this css:
.grid-item {
flex-basis: 25%;
display: inline-block;
padding: 0;
width: 100%;
text-align: center;
}
https://codepen.io/jpaul1982/pen/RwBypMj
In your codepen , you need to change the block-grid to
.block-grid {
display: flex;
align-items: baseline;
gap: 5%;
}
I've made a table-like flex structure, that looks pretty nice and has adaptive number of cells, but when last row isn't full - it stretches remaining cells to full size, which looks unshapely.
https://jsfiddle.net/zzmaster/6uw4gm3t/3/
(you need to enlarge results area to maximum in order to see this)
Logically, justify-content: flex-start; should fix this, but it doesn't.
Is there any way to turn remained cells back to their's place?
You can fix with remove flex: 1 1 0px CSS style. Replace below code with your current code.
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
}
change your css like below!
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
flex: 1 1 0px;
justify-content: center;
align-items: center;
resize: both;
}
I am having difficulty top aligning my 3 columns with multiple "rows". If I use the CSS property align-items: flex-end; I get the correct results, but elements are aligned at the bottom. If I try align-items: flex-start; nothing happens.
In the fiddle I would like the red block to move up so it is right bellow the Purple Heading.
Please see fiddle
Any help would be great!
I think you need to change html structure a little bit, if you want to make your task. I propose two versions to solve this issue. You can see it on the Fiddle.
Fiddle 1 - https://jsfiddle.net/AndrewKovalchuk/c6o4gdmh/
.categories {
display: flex;
flex-wrap: wrap;
}
.categories > ul {
margin: 0;
width: 33.33%;
box-sizing: border-box;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}
Fiddle 2 - https://jsfiddle.net/AndrewKovalchuk/q6jt2d8h/
.categories {
display: flex;
flex-wrap: wrap;
}
.categories .category {
width: 33.33%;
display: flex;
flex-direction: column;
}
.category > ul {
margin: 0;
box-sizing: border-box;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}
set flex-direction: column and give it a fixed height.
height: 400px;
flex-direction: column;
Fiddle - https://jsfiddle.net/0eqLf321/40/
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;
}
}