There is a flex container. And it is beautifully displayed in browsers, except for IE 11. For some reason, the last element it brings to the next line. How to cope with this? I tried to set flex values ​​specifically for IE using the "//" symbol, but no reactions.

CSS

.box { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; margin: 0 auto 3em; } .box__item { position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; text-align: center; -webkit-flex: 0 0 260px; flex: 0 0 260px; margin:inherit; }
  • one
    The reference caniuse.com/#search=flex somehow hints that in IE11 it will not work normally, because support is partial and there are a lot of bugs - lexxl
  • flex-wrap: wrap; - why write it if there is no transfer? - Qwertiy ♦
  • @Qwertiy transfer is carried out on small screens - Alla
  • @Alla, so put it in a media query? - Qwertiy ♦
  • @Qwertiy in this case wrap looks much better. Because on IE, if you specify nowrap, it cuts the last element of the container in half, as if it doesn’t fit - Alla

1 answer 1

Try to explicitly set the elements inside the flex width and the flex-grow, flex-shrink and flex-basis properties:

 flex-grow: 0; flex-shrink: 0; flex-basis: ширина элемента;

The fact is that IE defaults to flex-grow: 1 , and other browsers flex-grow: 0 (with the opposite vice versa), as a result of which the elements always fit in one row, unless this is specified by force. In three words, flex-grow - how much an element can stretch relative to the rest, flex-shrink - how much it will huddle relative to the rest, and basis - its basic width. Here is a more detailed example of flex tutorial use .

You need to tweak your code a bit, add width to the items, then the elements inside the flex container need not be done with display flex:

 .box { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; margin: 0 auto 3em; } .box__item { position: relative; text-align: center; -webkit-flex: 0 0 260px; flex: 0 0 260px; width: 260px; margin:inherit; }
  • I tried, but did not react at all - Alla
  • You could not post this part of the code, it will be easier to figure it out. - Mikl
  • added CSS in what form it is now to the question - Alla
  • updated the answer with this in mind - Mikl
  • Alas, the same picture - Alla