In the attached Codepen, you will see that I am using Flexbox to align the Logo and Menu icons in the header. The logo should be aligned left, the menu icon right. (I have other elements but this is just a simplified version for demonstration).
When testing in IE11, I see that the Flexbox isn't working. As far as I can tell via the documentation, IE11 should be supporting this. I have other Flexbox elements, which are also not working.
As you can see, the prefix is added for IE10.
Is anyone able to tell me where I am going wrong here?
https://codepen.io/anon/pen/EWqvNv
Here is the CSS:
.container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.nav-logo {
margin-right: auto;
}
As IE11 is quite buggy, so if to remove the justify-content: flex-end;, it will work as intended
Updated codepen
.container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.nav-logo {
margin-right: auto;
width: 100px;
height: 50px;
background: #000;
}
<html>
<head></head>
<body>
<header>
<div class="container">
<a class="nav-logo" href=""></a>
<a class="nav-toggle" href="#">Menu</a>
</div>
</header>
</body>
</html>
Side note:
Based on the above left-to-right flow (omitted justify-content defaults to flex-start), I would use margin-left: auto on the nav-toggle instead, sample codepen
Setting justify-content: space-between seems to work; why not use that?
I'm Sorry but if you look at https://caniuse.com/#search=justify-content it's clear that IE doesn't support this method. To fixed that problem on IE you can use extra css like so:
.container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
#supports(justify-content: space-between) {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
.nav-logo {
margin-right: auto;
width: 100px;
height: 50px;
background: #000;
}
.nav-toggle {
position: absolute;
right: 0;
top: 0;
#supports(justify-content: space-between) {
position: unset;
}
}
<html>
<head></head>
<body>
<header>
<div class="container">
<a class="nav-logo" href=""></a>
<a class="nav-toggle" href="#">Menu</a>
</div>
</header>
</body>
</html>
Related
I currently have a problem with nesting a flex box layout. I have a parent flex container and four separate containers within it, so far the other 3 column containers work correctly. However when I try to place another container underneath the main one it simply moves to the right side.
.container-wrap {
display: flex;
justify-content: center;
}
.container-leftbar {
display: flex;
height: 100%;
gap: 10px;
padding: 10px;
flex: 1;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: fit-content;
}
.container-main {
display: flex;
height: 100%;
gap: 10px;
padding: 10px;
flex: 1;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: fit-content;
}
.container-main2 {
display: flex;
height: 100%;
gap: 10px;
padding: 10px;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.container-rightbar {
display: flex;
height: 100%;
gap: 10px;
padding: 10px;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: fit-content;
}
<!--flex wrap-->
<div class="container-wrap">
<!--left column-->
<div class="container-leftbar">
<div class="1a">123</div>
<div class="1b">123</div>
<div class="1c">123</div>
</div>
<!--1 middle body-->
<div class="container-main">
<div class="2a">123</div>
<div class="2b">123</div>
</div>
<!--2 middle body-->
<div class="container-main2">
<div class="3a">123</div>
<div class="3b">123</div>
</div>
<!--right column-->
<div class="container-rightbar">
<div class="3a">123</div>
<div class="3b">123</div>
<div class="3c">123</div>
</div>
</div>
I tried to manually place the the top and left margin of the main box however I only really was able to achieve the top margin placing. I'm still somewhat new to using flex so any sort of help is appreciated.
I'm trying to set the search bar width for user search to 100%, but the code I've tried doesn't work when entered into the CSS.
This is the code I've tried to input into the CSS:
.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
width: 100%;
}
But this is unsuccessful.
How can I achieve this?
Here's the page: https://slapperoni.com/members/
How about giving flex: 1 to the input element?
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
<div style="
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
">
<input style="flex: 1;">
<button>test</button>
</div>
Hope this helps you.
Consider the following HTML code:
<div class="ungrouped-ordered-item">
<div class="information-container">
<div class="originating-order-id"> #00019405 </div>
<div class="placed-by"> Placed by: 18175 </div>
</div>
<div class="indicator-container">
<div class="indicator"> Unpaid </div>
<div class="indicator" >Pending </div>
</div>
</div>
with the following css:
.ungrouped-ordered-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.information-container {
display: flex;
flex-direction: column;
}
.indicator-container {
display: flex;
flex-direction: row;
align-items: center;
}
.indicator-container .indicator {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
padding: 0 10px;
border: 1px solid #2e2240;
}
The design I am aiming for, is:
to let the outermost flex containers (.ungrouped-ordered-item) children, grow as they need, and leave space between them, so that they are aligned to the left and right respectively of their containers
to make the children of the inner flex container (.indicator-container .indicator) be equal-width, by taking up the width of the wider element (in this case, it being the element with the text "Pending")
My first goal is achieved, but it seems, that even if adding flex: 1 to the .indicator containers, the browser will not correctly calculate the width of the two elements, and they will have uneven widths. I am presuming that this is because that their container, .indicator-container, has a fluid width. Am I right in this? How can I achieve my desired effect with all fluid width containers? (preferably without javascript).
Here's a fiddle also!
What is the argument against a width:50% for the .indicatorbox?
.ungrouped-ordered-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.information-container {
display: flex;
flex-direction: column;
}
.indicator-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.indicator-container > * {
border: 1px solid #2e2240;
padding: 0 10px;
flex-wrap: wrap;
}
.indicator-container .indicator {
width: 50%;
text-align: center;
}
<div class="ungrouped-ordered-item">
<div class="information-container">
<div class="originating-order-id"> #00019405 </div>
<div class="placed-by"> Placed by: 18175 </div>
</div>
<div class="indicator-container">
<div class="indicator"> Unpaid </div>
<div class="indicator" >Pending long long</div>
</div>
</div>
Changing the .indicator-container class from flex to grid and using automatic columns solves my problem. Although, it doesn't have as much coverage as flex, for my needs, this works:
.indicator-container {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
}
Here's the updated fiddle also.
I can't manage to place in a row horizontal 2 images by using flex. I made sure there was enough space in the parent element.
They will just remain in column.
.card {
width: 50%;
height: 90%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
<div class="card">
<img src={htmlLogo} alt="html" width="72px" height="72px">
<img src={cssLogo} alt="css" width="53px" height="74px">
</div>
It aligns horizontally.
.card{
width: 50%;
height: 90%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
<div className="card">
<img src="https://via.placeholder.com/72" alt="html" width="72px" height="72px"></img>
<img src="https://via.placeholder.com/53x74.png" alt="css" width="53px" height="74px"></img>
</div>
Are you trying to get the images to stack on top of eachother?
If that's the case, you can try flex-direction: column;
.card {
width: 50%;
height: 90%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
<div class="card">
<img src={htmlLogo} alt="html" width="72px" height="72px">
<img src={cssLogo} alt="css" width="53px" height="74px">
</div>
I figured it out, react was actually not happy with the className "card".
I don't know why because i'm not using this class anywhere else.
Maybe created a conflict with Bootstrap?
Anyway, thanks guys for the help!
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;
}
}