I'm using flexbox here - http://marcinzalewski.net/exo/ but I can't fix this for IE 11. Even Microsoft Edge is working fine and IE 11 is only version I need to fix.
My flex-container look like this:
.flex-container {
max-width: 1240px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-webkit-flex-wrap: row wrap;
justify-content: center;
padding: 0;
margin: 0 auto;
list-style: none;
}
And this is my inside elements code:
.offer-element {
width: 250px;
height: 250px;
border-radius: 50%;
margin-top: 60px;
margin-left: 25px;
margin-right: 25px;
}
Now those elements should be centered and fit in few lines, but they all are in the same line and have ~150px instead of 250px each. I tried to add display: -ms-flexbox; but it doesn't work anyway. Normally they are all centered and take 3 lines.
It looks like you're specifying flex-wrap only on webkit. By default flex will fit all items one line. You need to specify flex-wrap: wrap on your container.
IE 11 requires a unit to be added to the third argument, the flex-basis property
https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx
Related
CSS3 Flexbox row wrap is not working in iOS version 8.3 only. As per the suggestion on the link, I have updated my code. But still, it is not wrapping as expected.
`
.case-study-list {
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 0 0 30px;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
.case-study-item {
list-style-type: none;
min-width: 180px;
padding: 30px 20px 0;
-webkit-flex: 1 1 180px;
-ms-flex: 1 1 180px;
flex: 1 1 180px;
}
}
`
Please find the link to my fiddle.
I'm really stuck with this. Any help is much appreciated.
Seems you missed to add prefix on display property. Safari 9 supports all standard flex properties, with Safari 8 and older you'll need to use vendor prefixes.
.case-study-list {
display: -webkit-flex;
display: flex;
}
Here are some link's that might help you
CSS Autoprefixer
FLEXBOX CHEAT SHEET
I have recently been developing a website using flexbox, and have been doing so on Chrome. The site looks perfect on Chrome (and Safari, according to users) however it has some serious issues when viewed on Firefox and IE. I have tried to look online for documentation on which prefixes to include in my CSS and how to make it appear normal on those browsers, but I truly cannot find a summation or tutorial anywhere. Here is a sample of my CSS code, containing flexboxs that do not display correctly on Firefox and IE -
.header {
padding: 12px;
padding-top: 10px;
padding-bottom: 0px;
margin: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
height: 70px;
background-color: #000000;
}
.header-box {
padding-left: 15px;
padding-right: 15px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
align-content: flex-start;
align-items: flex-start;
height: 70px;
width: 1170px;
background-color: #000000;
}
This code is for a header bar along the top of the site. I thought by including the display: -moz-box; and such, that would allow it to be seen on Firefox, but the formatting is messed up in the sense that the box is not centered but instead along the left side of the screen, and the boxes within the header are all along the top of the parent container rather than on the bottom. Thank you for any insight you may have on this problem!
In only works on webkit browsers because you only use
-webkit-flex-flow: row wrap;
You should use the standard
flex-flow: row wrap;
Otherwise, the initial value row nowrap will be used instead.
I'm new to this topic and read myself into it. I worked through this guide.
In this guide they say:
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.
I want Flexbox to use all available space, but obviously right under 2 there is empty space and also enough space for the element 3.
When I take a look at the philosophy of Flexbox I can see not used but available space in my layout.
Am I doing something wrong in my css or is Flexbox broken?
Layout/Output
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-start;
-webkit-flex-flow: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 300px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
HTML
<ul class="flex-container">
<li class="flex-item">1111111111 1111111111</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
Flexbox is primarily a one-dimensional layout mode. It lets you distribute & size elements responsively, in just a single axis (horizontal or vertical), and then it supports basic alignment/stretching in the other axis.
flex-wrap: wrap can make it look two-dimensional, but really it just lets you split your flex items into "lines", where each "line" is like a one-dimension flexbox. And the lines don't overlap (or really interact at all).
So, in your diagram, the "3" element doesn't fill in the empty space because it's in a separate flex line from where the empty space is, and the flex lines cannot overlap.
To achieve what you want in pure CSS, I think you'll need CSS Grid, specifically with grid-auto-flow: dense. This spec is still under active development, though, and browsers have mixed levels of implementation, so it's not ready for use in production websites yet.
Yes, your CSS is slighty wrong
JSFiddle Demo
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap; /* here */
}
.flex-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
background: tomato;
padding: 5px;
width:300px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
However, on further discussion it appears that what you are trying to achieve is not possible (AFAIK) with flexbox.
I expect element 3 to move under 2, so all the empty space is used
Accordingly, I think a JS solution like Masonry.Js would be the recommended solution.
Let's check this fiddle:
img {
float: left;
}
#inner {
height: 128px;
background-color: yellowgreen;
display: table-cell;
vertical-align: middle;
}
#content {
background-color: red;
}
<img src="http://cdn.memegenerator.net/instances/250x250/37934290.jpg" width="128" height="128" />
<div id="inner">
<div id="content">text text tertkl elknr tlken lsl kdmfsldkfmsldkfmslkd mfkndfln dflkfndg lkn</div>
</div>
this works so far as I expect - text is centered, and as you shrink the width, text goes underline: but then its "too far" from the image. The best would be if the vertical-align: middle; became vertical-align: top; when it needs to jump. How to do it without possibly jQuery?
A simple way to achieve this is to use a CSS Media Query.
Your markup would stay the same and your CSS would only need to have the following added:
#media screen and (max-width: 290px) {
#inner {
vertical-align: top;
}
}
in action: http://jsfiddle.net/uWMkH/1/
What that says is, "When the viewport's width is no more than 290px, do this stuff to #inner.
Take a look at these links for more information:
http://www.w3.org/TR/css3-mediaqueries/
http://cssmediaqueries.com/
http://css-tricks.com/css-media-queries/
The caveat with using media queries to do this is that they aren't supported in IE8 and below. I hope you don't have to deal with those headaches!
Look here for a complete list of browsers with support:
http://caniuse.com/#feat=css-mediaqueries
You can do this without media queries, but it requires a browser that supports the entire CSS Flexible box module (most browsers are missing support for wrapping). At this point in time, support is limited to Opera, Chrome, and IE10.
http://codepen.io/cimmanon/pen/rFdkt
figure {
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-color: yellowgreen;
}
#supports (flex-wrap: wrap) {
figure {
display: flex;
}
}
figcaption {
-webkit-flex: 1 15em;
-ms-flex: 1 15em;
flex: 1 15em;
background-color: red;
}
What Flexbox offers over media queries is the ability to reflow the content based on the available space, not just the browser width.
I am trying to style a li elements to dynamically fit its text content with equal spacing between the li's but cannot seem to accomplish this.
The result currently looks like:
I want the white spaces between the li's to be consistent but the overall li's to be dynamic widths but not exceeding a certain width: (Because there are two different ul's they are styles with different paddings so that is why the space sizes are different between the left menu and right menu, but each li is consistently spaced in the respective ul's)
The css is (arbitrarily):
li{
display: inline-block;
max-width: 95px;
padding: 5px 10px;
etc....
}
I'm trying to accomplish this using css, avoiding JavaScript or html markup if possible. Thank you.
If you want the whitespace between the elements to be the same, ie. smaller headings will have smaller menu items like in your images then you're out of luck. I don't think you can do it without JavaScript.
If you will setting with uniform width menu items then that's fairly easy to accomplish, just set the <li>s to 100%/(number of menu items) and float them.
li {
float:left;
width:14.2857% /* 100/17 */
}
This is optimized for Opera, Chrome, and IE10. Firefox and Safari follow an older Flexbox specification and look best when the lists have a balanced number of items. There's a decent looking fallback for non-Flexbox browsers. You'll likely need to add additional styling to disguise the uneven list heights.
http://codepen.io/cimmanon/pen/HxLvf
nav {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
ul {
display: table-cell; /* non-flexbox browsers */
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
li {
display: table-cell; /* non-flexbox browsers */
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 10em;
-ms-flex: 1 1 10em;
flex: 1 1 10em;
width: 10em; /* for old Firefox/Safari */
/* for vertical/center alignment */
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-flex-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
/* pretty it up! */
nav {
background: #99D;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: .5em 1em;
background: white;
border: 1px solid;
}
<nav>
<ul>
<li>Home</li>
<li>Latest Projects</li>
<li>Products & Eco Funding</li>
<li>The Green Deal</li>
</ul>
<ul>
<li>Latest Projects</li>
<li>Job Vacancies</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
The fact that you have 2 lists where you want to equalize the widths of the elements is what makes Flexbox necessary. If you had only a single list, you could simplify the whole thing down to just using display: table on the ul and display: table-cell on the li.