发布于 4年前

解决IE11 Flex布局文本不换行的问题

在页面上使用了flex来布局,代码如下:

CSS:

.container{
    display: flex;
    flex-direction: column;
    border: 1px solid red;
    align-items: center;
  }
  .item {
    border: 1px solid blue;
  }

html:

<div class="container">
  <div class="item">
   事到手且莫急,便要缓缓想。想得时切莫缓,便要急急行。处天下事,只消得安详二字,兵贵神速,也须从此二字做出。然安祥非迟缓之谓也,从容详审,养奋发于定之中耳。
  </div>
  <div class="item">
   事到手且莫急,便要缓缓想。想得时切莫缓,便要急急行。处天下事,只消得安详二字,兵贵神速,也须从此二字做出。然安祥非迟缓之谓也,从容详审,养奋发于定之中耳。
  </div>
  </div>
 </div> 

文本是没有换行,在chrome则显示正确。

解决方法:

1、把align-items:center去掉,显示正确。但是与之前要的居中效果没有了

2、在flex容器的子元素上添加width:100%。示例的.item改为:

.item {
    border: 1px solid blue;
        width:100%;
  }
©2020 edoou.com   京ICP备16001874号-3