Flexbox seems to have a bug when you try to override a previous applied justify content parameter. What I want to do is justify content centered, but after a certain width apply a media query to the same item to justify content space between. The effect is that justify content space between doesn't override the original centering but instead applies additional to the original style. The result is items disappearing off the screen. Examples:
Original style:
.header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
Then apply a media query:
.header {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
The result is not what you would expect, as if you set justify content space between on the original style. Instead its as if center is still applied, and it tries to justify content space between ontop of the centering already happening, instead of removing centering and applying justify content space between.
Related
I have a menu with list item displayed in a vertical list using flexbox and flex-direction:column.
It's working great in all browsers except for IE and Edge.
I tried tricks like adding display flex to the flex container but it's not working either.
Any ideas ?
Here's the website where the problem happens : http://lesdeuxvagues.com/demo
Click the plus button in the menu to see the problem
CSS:
ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
Turns out i just fixed the issue by adding display:block; to my list items.
They had a display:table-cell from the foundation framework that might have caused this problem!
I've created a flex container like this
And this is the CSS for the flex container
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: center;
justify-content: center;
}
So, I would like to know is it possible to change the place of the first flex item to left using the flex properties?
All of the flexbox tutorials that I've seen so far say that vertical align is done by using align-items and justify-content and setting both to center; however that doesn't seem to be working, as you can see below (I'm trying to align the lorem ipsum text). The browser I'm using is Chrome, if that matters.
Here's a codepen: http://codepen.io/anon/pen/QjBrEm
I've tried a lot of the suggestions here on Stack Overflow, for example:
body, html:
height: 100%
These don't seem to work.
Your SASS should be:
.initial
background-color: #212121
color: #ffffff
display: flex
align-items: center
justify-content: center
to align the content of that element as flexbox layout is not inherited by children.
Codepen Demo
When you create a flex container only the child elements become flex items. Descendants beyond the children do not become flex items and flex properties don't apply to them.
So if you're trying to center the <p> text, you'll notice the <p> is a child of <section>, which is a flex item but not a flex container.
You'll need to make <section> a (nested) flex container so that flex properties apply to the <p>.
Try this:
#mainpage-container section {
width: 100%;
height: 100vh;
text-align: center;
display: flex; /* new */
align-items: center; /* new */
justify-content: center; /* new */
}
DEMO: http://codepen.io/anon/pen/xwJjvO
You have laid out the sections inside of the container using flexbox, and as shown on Codepen this gives the result that all three sections are shown below each other.
The text in the first section is inside section.initial, which is not laid out using flexbox, as that was only specified on the parent. Therefore, the text is just placed according to the default padding and the text-align you entered.
To get the text centered in the section, also start using flexbox layout in that section.
Since you are aligning the paragraph inside the section element, you need to use the flexbox properties on section(parent). Flexbox properties on #mainpage-container will not have effect on the grandchild p as it is not inherited by the parent i.e. section element.
#mainpage-container section.initial {
display: flex;
justify-content: center;
align-items: center;
}
#mainpage-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#mainpage-container section {
width: 100%;
height: 100vh;
text-align: center;
}
#mainpage-container .initial {
background-color: #212121;
color: #ffffff;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
#mainpage-container .initial #logo {
height: 15rem;
width: auto;
}
<div id="mainpage-container">
<section class="initial">
<!--<img src="/assets/k.png" id="logo">-->
<p>Lorem ipsum.</p>
</section>
<section>
</section>
<section>
</section>
</div>
I was just wondering if it was possible to change a bit of your CSS if it is being viewed in a different browser.
For example, I'm using this particular CSS for a flexbox div:
.wdFlex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
It works nice in Chrome, Safari, Firefox, IE10+ etc., but as you know, IE9 does not support flexbox. Now, I can do the thing flexbox do in normal CSS, but now I just wanna learn some flexbox stuff and try it out. But ofc, IE9 should be supported in my opinion, so my question is, if there is any way, without changing the entire css file via:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
to change the css ?
Just like instead of the flexbox thing in the above CSS, it just wrote out, if IE9:
.wdFlex {
display: inline-block;
}
As an example.
Hope you understand what I mean :)
Thanks in advance.
You can take advantage of CSS cascading, so if the property is not supported in the browser you can write a fallback.
.wdflex {
display: inline-block; /* for IE9 */
display: flex-box; /* browsers that support it will pick it up */
}
For this particular example you could use conditional comments to apply browser specific classes to the html tag in the markup like so:
<!DOCTYPE html>
<!--[if IE 9]><html class="ie9"> <![endif]-->
<!--[if IE 10]><!--> <html class="ie10"> <!--<![endif]-->
Obviously can write more classes and do more complicated things with this, but you get the idea. Then just write the css on the class.
This post goes into more detail about this technique and specifically handling display: flex
http://designkarma.co.uk/blog/using-flexbox-now
I have a flexbox div that allows a SINGLE child element. So far I've been able to get alignments of the child working nicely (top, left, right, bottom, etc), including vertical stretch. I also want to be able to support horizontal stretch at the same time as vertical ('at the same time' seems to be the key).
I've been able to accomplish horizontal stretch by setting the 'flex' property to '1 100%' on the child element, however this appears to ignore any padding applied to the parent element(and any margin applied to the child node for that matter).
Looking at the flexbox spec, I'm not able to find any other way to do this along the main axis of the flexbox. Cross-axis stretch is no problem.
It is possible. And here is a small sample which shows you how:
.centerbox {
/* basic styling */
width: 350px;
height: 95px;
font-size: 14px;
border: 1px solid #555;
background: #CFC;
/* flexbox, por favor */
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
<!DOCTYPE html>
<html>
<head>
<style>
.centerbox {
/* basic styling */
width: 350px;
height: 95px;
font-size: 14px;
border: 1px solid #555;
background: #CFC;
/* flexbox, por favor */
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
</style>
</head>
<body>
<div class="centerbox">
<textarea>resize me, please</textarea>
</div>
</body>
</html>
FYI: Axel Russell did some great work on writing a class for multi browser support: http://infrequently.org/2009/08/css-3-progress/
Although you found your solution, I think the next snippet could be handy to all developers (such as myself) who searched for a general solution.
http://jsfiddle.net/EL2KL/1/
I'd be happy if you publish fiddle with your solution.
p.s. thanks to Jiri (the flex master)