This is what I expect (tested in Chrome and Firefox):
This is how it looks in Safari Version 9.0.2 (11601.3.9)
Quick jsfiddle to show you an example:
https://jsfiddle.net/qbozL26m/1/
CSS:
.container {
padding-top: 20px;
}
.equal-height {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.equal-height > [class^="col-"],
.equal-height > [class*=" col-"] {
display: flex;
//align-items: center;
//
.well {
width: 100%;
}
}
Edit:
Gif och Chrome-behaviour (correct)
Gif of Safari behaviour (incorrect)
Edit 2:
I've come up with a solution to fix it for safari, it's not that good though because it overrides bootstraps column sizes.
.equal-height > [class^="col-"],
.equal-height > [class*=" col-"] {
display: flex;
flex-basis: 33%;
}
Related
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/
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 have this part of CSS and I have problems on Chrome and Safari even though the whole CSS file has been prefixed with Autoprefixer (and double checked with Pleeeease). Any clue why ? It's supposed to be 2 boxes having a flex behaviour on row (.deuxcases), and each box has a flex behavior on column (2 x .case), but on Chrome and Safari it's all making a long messy line, works fine only on Firefox. I use Chrome 50 and Safari 8.0.2. Thank you
.deuxcases {
margin-top: 70px;
max-height: 60vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-webkit-flex-direction:row;
-ms-flex-direction:row;
flex-direction:row;
-webkit-flex-wrap:nowrap;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
.case {
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;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
padding:auto;
margin:10%;
height: auto;
min-width: 25vw;
box-shadow: .5em .5em .5em .5em #aaa;
}
You should always try setting height and width to explicit values and not to auto. The latter works inconsistently across browsers, and that's why you are struggling with this layout.
Just set the height on the .case class to 100% instead of auto, and it'll work as expected.
Like this:
.case {
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;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
padding:auto;
margin:10%;
height: 100%;
min-width: 25vw;
box-shadow: .5em .5em .5em .5em #aaa;
}
I have the following media query codes:
//First
#media screen and (min-width: 357px) and (max-width: 910px) {
#questionBreadcrumb {
display: block;
text-align: center;
.breadcrumbs {
> div {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
}
}
}
}
//Second
#media screen and (min-width: 911px) {
#questionBreadcrumb {
display: flex;
justify-content: space-between;
align-items: center;
.breadcrumbs {
> div {
display: flex;
align-items: center;
}
}
}
}
Somehow when I scale my screen up to 800px the first media query is applied correctly. But when I get to 804px it started using the second media query.
Can someone tell me or point to me what I'm doing wrong? It might be something so small but I just can't figure it out.
try this:
#questionBreadcrumb {
display: flex;
justify-content: space-between;
align-items: center;
.breadcrumbs {
> div {
display: flex;
align-items: center;
}
}
}
#media screen and (max-width: 910px) {
#questionBreadcrumb {
display: block;
text-align: center;
.breadcrumbs {
> div {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
}
}
}
}
I think u wrong in write the css code, so the media queries didn't work. I edit this for recommend
From this :
.breadcrumbs {
> div {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
}
Shoyld be :b
.breadcrumbs div {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
}
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....