1. Toy模板网首页
  2. > Toy博客

elementui前端flex布局兼容IE10浏览器常用属性使用

9月前 作者：xinlianluohan 分类：Toy博客 阅读(38) 违法举报

这篇具有很好参考价值的文章主要介绍了elementui前端flex布局兼容IE10浏览器常用属性使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

IE10以下完全不兼容flex，IE10部分兼容，使用时对应chrome的用法为如下所示：

chrome　　　　　　　　　　　　　　　   IE10

display: flex; 　　　　　　　　　　　 display: -ms-flexbox;

flex-direction: column;　　　　　　　-ms-flex-direction: column;

justify-content: center; 　　　　　　-ms-flex-pack: center;

justify-content:space-between;　　　 -ms-flex-pack: justify;

justify-content:space-around;　　　　-ms-flex-pack: justify; // 无法实现，用justfiy代替

justify-content: flex-end;　　　　　 -ms-flex-pack: end;

align-items: flex-start;　　　　　　　-ms-flex-align: start;

align-items: center;　　　　　  　　　-ms-flex-align: center;

align-items: flex-end;　　　　　　　　-ms-flex-align: end;

align-items: baseline;　　　　　　　　-ms-flex-align: baseline;

flex: 1;　　　　　　　　　　　　　　　　-ms-flex: 1;

align-self: center;　　　　　 　　　　-ms-align-self: center;

flex-wrap: wrap; 　　　　　　　　　　 -ms-flex-wrap: wrap;

注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 inherit。文章来源地址https://www.toymoban.com/news/detail-542632.html

一、常用的flex布局兼容性写法

//定义flex
.flex{

    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */

    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display: -moz-box;      /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox;   /* 混合版本语法: IE 10 */  

    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */

}



//主轴为水平方向，起点在左边
.flex-row {

  -webkit-flex-direction: row;

  -moz-flex-direction: row;

  -ms-flex-direction: row;

  flex-direction: row;

}



//主轴为垂直方向，起点在上沿
.flex-column {

  -webkit-box-direction: normal;

  -webkit-box-orient: vertical;

  -moz-flex-direction: column;

  -webkit-flex-direction: column;

  flex-direction: column;

}



//伸缩宽度
.flex-1 {

  -webkit-flex: 1;        /* 新版本语法: Chrome 21+ */

  flex: 1;                /* 新版本语法: Opera 12.1, Firefox 22+ */

  -webkit-box-flex: 1;    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

  -moz-box-flex: 1;       /* 老版本语法: Firefox (buggy) */

  -ms-flex: 1;            /* 混合版本语法: IE 10 */  

}



// 主轴左对齐
.flex-justify-start{

  -webkit-box-pack: start;

  -webkit-justify-content: flex-start;

  -moz-justify-content: flex-start;

  -ms-justify-content: flex-start;

  justify-content: flex-start;

}



// 主轴右对齐
.flex-justify-end{

  -webkit-box-pack: end;

  -webkit-justify-content: flex-end;

  -moz-justify-content: flex-end;

  -ms-justify-content: flex-end;

  justify-content: flex-end;

}



// 主轴居中对齐
.flex-justify-center{

  -webkit-box-pack: center;

  -webkit-justify-content: center;

  -moz-justify-content: center;

  -ms-justify-content: center;

  justify-content: center;

}



// 主轴两端对齐,项目之间的间隔都相等
.flex-justify-between{

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

  -moz-justify-content: space-between;

  -ms-justify-content: space-between;

  justify-content: space-between;

}



// 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
.flex-justify-around{

  -webkit-box-pack: distribute;

  -webkit-justify-content: space-around;

  -moz-justify-content: space-around;

  -ms-justify-content: space-around;

  justify-content: space-around;

}



// 交叉轴的起点对齐
.flex-align-start{

  -webkit-box-align: start;

  -webkit-align-items: flex-start;

  -moz-align-items: flex-start;

  -ms-align-items: flex-start;

  align-items: flex-start;

}



// 交叉轴的终点对齐
.flex-align-end{

  -webkit-box-align: end;

  -webkit-align-items: flex-end;

  -moz-align-items: flex-end;

  -ms-align-items: flex-end;

  align-items: flex-end;

}



// 交叉轴的中点对齐
.flex-align-center{

  -webkit-box-align: center;

  -webkit-align-items: center;

  -moz-align-items: center;

  -ms-align-items: center;

  align-items: center;

}



// 项目的第一行文字的基线对齐
.flex-align-baseline{

  -webkit-box-align: baseline;

  -webkit-align-items: baseline;

  -moz-align-items: baseline;

  -ms-align-items: baseline;

  align-items: baseline;

}



// （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
.flex-align-stretch{

  -webkit-box-align: stretch;

  -webkit-align-items: stretch;

  -moz-align-items: stretch;

  -ms-align-items: stretch;

  align-items: stretch;

}



// 换行，第一行在上方
.flex-wrap {

  -webkit-box-lines: multiple;

  -webkit-flex-wrap: wrap;

  -moz-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

  -o-flex-wrap: wrap;

  flex-wrap: wrap;

}

二、在IE10浏览器中，使用flex布局的常用兼容性代码：

/*display*/
.display_flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.display_flex > *{
    display: block;
}
.display_inline-flex{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;    
}
.display_inline-flex > *{
    display: block;
}
/*伸缩流方向*/
.flex-direction_column{
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.justify-content_flex-end{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content_flex-justify{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items_flex-end{
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items_center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items_baseline{
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}
/*伸缩性*/
.flex_auto{
    -webkit-box-flex: 1;
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.flex_1{
    width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;    
}
/*显示顺序*/
.order_2{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
.order_3{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}

到了这里，关于elementui前端flex布局兼容IE10浏览器常用属性使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • win10系统使用自带IE浏览器

    对于Win10系统,Microsoft仍然内置了IE(Internet Explorer)浏览器,用户可以直接使用。主要步骤如下: 1. 寻找IE浏览器图标。在Win10系统的任务栏或开始菜单中寻找IE浏览器的图标,双击打开。如果未显示图标,可以在开始菜单的“所有应用”中找到Internet Explorer并打开。 2. 首次运行配置。

    2024年02月11日
    浏览(54)
  • win10取消ie浏览器自动跳转edge浏览器

    win10取消ie浏览器自动跳转edge浏览器

    建议大家看完整篇文章再作操作 随着windows10 日渐更新，各种不同的操作，规避IE浏览器跳转Edge浏览器的问题 1.（失败）思路 协助Edge浏览器 管理员身份打开 PowerShell 一般edge的默认安装目录是 PowerSell 进行跳转到上述目录 执行卸载命令 然后会提示 打开任务管理器，找到所有

    2024年02月07日
    浏览(59)
  • Win10系统下禁止ie浏览器自动跳转到Microsoft Edge浏览器

    Win10系统下禁止ie浏览器自动跳转到Microsoft Edge浏览器

    当有些情况下，需要使用ie浏览器时，但是当我们打开ie浏览器会自动跳转到Microsoft Edge浏览器，该如何设置，来禁止它自动跳转呢？

    2024年02月11日
    浏览(69)
  • 如何在win10系统上使用旧版本的IE浏览器

    如何在win10系统上使用旧版本的IE浏览器

    win10系统打开IE浏览器自动变成了Edge浏览器，切换成IE模式时，IE浏览器的版本默认为IE11（注：Edge浏览器只支持IE11），有些网站只能使用IE浏览器打开或者在做一些兼容性测试时，需要使用到不同版本的浏览器。下面介绍一下，如何在win10系统上使用旧版本的IE浏览器： 第一步

    2024年02月11日
    浏览(59)
  • win10系统打开IE浏览器后会自动跳转到Edge。

    win10系统打开IE浏览器后会自动跳转到Edge。

    解决win10系统打开IE浏览器后会自动跳转到Edge浏览器。win10系统自动升级后无法打开IE，打开也是自动跳转到系统自带的Edge浏览器，但有些业务系统只能用IE，下面就教大家怎么解决这个问题。（win11用同样方法也可以解决） 打开win10的控制面板， 打开网络和lnterent  打开lnte

    2024年02月11日
    浏览(51)
  • win10进行安装使用11ie浏览器——遇到问题合集解决(执行一遍、问题解决)

    win10进行安装使用11ie浏览器——遇到问题合集解决(执行一遍、问题解决)

    因为需要访问的页面，只能兼容使用对应的ie进行访问，所以才开始安装并使用ie。再次总结自己踩的坑。 切记注意 操作完 一下步骤 请重启电脑 首先使用ie的前提就是需要确保自己的电脑上是有ie的 检验方式之一 之间进行——“开始”——进行搜索。 或者检验这个地方 打

    2024年02月04日
    浏览(70)
  • Win10 python环境测试selenium加IE浏览器自动化-踩坑实录

    Win10 python环境测试selenium加IE浏览器自动化-踩坑实录

    【背景】 需要访问某个旧网址，仅支持IE浏览器访问。为了实现自动化，被迫采用python加selenium、加IE浏览器来做。 【实录】 selenium采用IE浏览器方式的资料不多，网上可供参考范例不多。以下实时记录整个过程，实现调通一个基本访问实例。 【第一步】安装正确版本的sele

    2024年01月21日
    浏览(100)

  • 解决前端浏览器兼容性问题

    解决前端浏览器兼容性问题时前端开发中的一项重要任务。以下是一些常用的方法来解决这类问题： 1、使用css前缀： 不同浏览器可能对某些CSS属性有不同的前缀要求。可以使用CSS前缀来覆盖不同浏览器的样式需求。例如，使用 -webkit 前缀来适配WebKit（Chrome、Safari）浏览器

    2024年02月09日
    浏览(48)

  • 前端浏览器的兼容性问题探讨和解决方案

    解决不同浏览器之间的兼容性问题，可以采取以下一些常用的解决方案： 使用 CSS Reset：不同浏览器对于默认样式的定义存在差异，使用 CSS Reset 可以将不同浏览器的默认样式重置为统一的基准样式，从而减少浏览器之间的差异。 使用 CSS Hack 或浏览器前缀：某些 CSS 属性或值

    2024年02月14日
    浏览(52)
  • Win10 IE11浏览器，您正在查看的页使用 Java，Microsoft 网站提供有关 Java 支持的更多信息 解决

    Win10 IE11浏览器，您正在查看的页使用 Java，Microsoft 网站提供有关 Java 支持的更多信息 解决

    最近工作需要支持下IE11浏览器，使用java applet控件。 以前IE10及以下版本都比较正常，但是IE11会出现一些比较奇怪的现象。 记录下解决的方法和过程，便于有需要的同学自取。 1.首先是报错，如下图所示；这个网上搜索了较多的资料，分析下来核心的原因是浏览器未启用ja

    2024年02月09日
    浏览(85)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包