解决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%;
  }

版权声明:著作权归作者所有。

相关推荐

解决升级到iOS 11后UIBarButtonItem图片变形的问题

在iOS 10使用UIBarUbttonItem图片显示正常,升级到iOS 11后,图片拉伸变形。这个原因是从iOS 11开始,UIBarButtonItem使用了autolayout 而不是frame。解决方法是,对UIBarButtonItem里的图片按钮添加约束。例如(swift):button.widthAnchor.constraint(equalToCon

Android:解决android.os.NetworkOnMainThreadException问题

原因当应用在主线程执行网络操作时会抛出此异常android.os.NetworkOnMainThreadException。解决方法把执行网络的操作的代码放到AsyncTask里可以避免此问题。示例:class MyConnectTas extends AsyncTask {     @Override  &

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主

解决iPhone X上下黑边的问题

在iPhone X上直接运行已有的App,App的上下出现黑边:解决方法iPhone X的显示屏为1125px × 2436px (375pt × 812pt @3x),相比于4.7寸的iPhone6,iPhone7以及iPhone8,iPhone X的宽度和4.7寸的屏幕一样,而高度则比4.7寸屏幕多出14