flex-wrap doesnt work in internet explorer

Question

I have 4 boxes, its a standard 2 columns 2 rows boxes. Unfortunately I have to provide ie support. In internet explorer flex wrap isnt working so all the boxes are currently in one row and it looks very messy. Is there an alternative to flex wrap for this? The code is very basic and works in all browsers but not in ie.

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

Does this answer your question? [Flexbox and Internet Explorer 11 (display:flex in ?)](https://stackoverflow.com/questions/21600345/flexbox-and-internet-explorer-11-displayflex-in-html) — Beller, Mar 16 '21 at 14:52

ullas kunder · Accepted Answer · 2021-03-17T07:59:55.403

flex-wrap in IE

Importances of `-webkit-box`

There are several methods to fix the problem and the best approach is adding prefixes
Flexbox for IE10, with -ms- prefix

{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

learn Can i use

try this ;)

main { background: #E15555; } 
.wrap { 
   display: -webkit-box; 
   display: -ms-flexbox; 
   display: flex; 
   -webkit-box-align: center; 
      -ms-flex-align: center; 
         align-items: center; 
   -webkit-box-pack: center; 
      -ms-flex-pack: center; 
    justify-content: center; 
   max-width: 700px; 
   margin: 0 auto; 
   min-height: 100vh;
} 
.box { padding: 20px; } 
.content { 
    width:  100px; 
    height: 100px; 
    background: #FEC8EE;
}

<body>
<main> 
    <div class="wrap"> 
        <div class="box"> 
            <div class="content"></div> 
        </div> 
        <div class="box"> 
            <h1>Hola Amigo</h1> 
        </div> 
     </div>
</main>
</body>

flex-wrap doesnt work in internet explorer

1 Answers1

flex-wrap in IE

Importances of -webkit-box

Importances of `-webkit-box`