flex属性不能在IE中工作 [英] flex property not working in IE

问题描述

为了进行测试，我从CodePen获得了一个非常简单的flexbox布局，下面。

Chrome按预期工作; IE11失败。

在Chrome浏览器上运行layout-success的图片：

在IE11上布局失败的图像

为什么速记flex属性的行为与IE中的长手属性不同？

$ b

>


• 而不是 flex：1 使用 flex：auto 或者添加 flex-basis：auto ）
  
  

  如果使用 flex：1 在 flex-direction：row （例如在大屏幕上），然后切换到 flex -direction：column 在媒体查询中（比方说移动设备），你可能会发现你的fl ex项目崩溃。
  
  

  在媒体查询中，添加 flex-basis：auto 。这将覆盖 flex：1 规则中的 flex-basis 值（通常 0 ， 0px 或 0％，这取决于浏览器）。
  
  

  使用 flex：auto 也可以工作，简称：
  
  

  
  
  • flex-grow：1
  
  
  • shrink：1
  
  
  • flex-basis：auto
  >
  
  
  

  ---

  
  
  
  
  
  • 使用旧式 width / height 属性而不是 flex 。
  
  
  
  
  

  ---

  
  
  
  
  

  • 使用 block 布局而不是 flex 布局
    
    

    您不需要完全放弃flex布局。但是对于一个特定的容器，你可以用 display：block 来代替 display：flex; flex-direction：column 。

    
    
    

    例如，在需要使用某些浏览器在flex容器中填充百分比（或边距）不能很好地工作。

    
    
    

    为了使它工作，我切换了显示

      / *一个flex项目，也是一个嵌套的flex容器* / 
    ＃footer-container>文章{
     display：flex; 
     flex-direction：column; 
     
     
     
     $ b $ p 
     
     
     
     
      
     
     ＃footer-container>文章{
     display：block; 
     
      
     

  

  
  

  I have been unable to determine why flexbox is not working in IE 11.

  For testing, I sourced a very simple flexbox layout from CodePen and have pasted the information below.

  Chrome works as intended; IE11 fails.

  Image of layout-success running on Chrome:

  Image of layout-failure on IE11

  body {
    background: #333;
    font-family: helvetica;
    font-weight: bold;
    font-size: 1.7rem;
  }
  
  ul {
    list-style: none;
  }
  
  li {
    background: hotpink;
    height: 200px;
    text-align: center;
    border: 2px solid seashell;
    color: seashell;
    margin: 10px;
    flex: auto;
    min-width: 120px;
    max-width: 180px;
  }
  
  .flex {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  <ul class="flex">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

  http://codepen.io/hankthewhale/pen/IdKkB?editors=110

  解决方案

  IE has a problem parsing the flex property.

  Here are a few workarounds that have worked for me:

  • Use the long-hand properties instead of the shorthand.

    Instead of something like this: flex: 0 0 35%.

    Try this:

    • flex-grow: 0
    • flex-shrink: 0
    • flex-basis: 35%

  ---

  • Make sure flex-shrink is enabled.

    So instead of this: flex: 0 0 35%

    Try this: flex: 0 1 35%

  ---

  • Careful with percentage and unitless values with flex-basis

    This may depend on your version of IE11. Behavior appears to vary.

    Try these variations:

    • flex: 1 1 0
    • flex: 1 1 0px
    • flex: 1 1 0%

    More details here:

    • Image behavior within flexbox (rows embedded in columns)
    • Why does shorthand flex property behave differently than long hand properties in IE?

  ---

  • Instead of flex: 1 use flex: auto (or add in flex-basis: auto)

    If you're using flex: 1 in flex-direction: row (such as on larger screens), and you switch to flex-direction: column in a media query (let's say for mobile devices), you may find that your flex items collapse.

    In your media query, add flex-basis: auto. This will override the flex-basis value in the flex: 1 rule (which is usually 0, 0px or 0%, depending on the browser).

    Using flex: auto should also work, which is short for:

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: auto

  ---

  • Use old-fashion width / height properties instead of flex.

  ---

  • Use block layout instead of flex layout.

    You don't need to completely abandon flex layout. But for a particular container you may be able to get the job done with display: block instead of display: flex; flex-direction: column.

    For example, in needing to use the padding trick to responsively embed a video in a flex item, the obstacle I faced was that some browsers don't work well with percentage padding (or margin) in a flex container.

    To make it work I switched the display value on the flex item from this:

    /* a flex item, also a nested flex container */
    #footer-container > article {
        display: flex;
        flex-direction: column;
    }
    

    to this:

    #footer-container > article {
        display: block;
    }
    

  这篇关于flex属性不能在IE中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！