使用flexbox行内样式时如何覆盖原有CSS中定义的width属性

之所以删掉行内width属性后原有宽度规则仍然生效，是因为外部CSS使用了ID选择器h1#myId定义width，优先级高于默认的用户代理样式，当行内没有声明width属性时，就会应用外部定义的固定宽度值。

解决方案 #

你可以通过行内样式显式重置width属性覆盖外部CSS的定义，行内样式优先级高于ID选择器的外部样式规则，只要在行内声明width属性即可覆盖原有值，具体有两种常用写法：

• 兼容所有浏览器的写法，设置width: auto让宽度自动适配flex布局：

  <h1 id="myId" style="font-family:Lato,Helvetica,Arial,sans-serif;width:auto;display:flex;justify-content:space-between;">
  

• 现代浏览器可使用width: unset完全继承上级布局的宽度规则，效果一致：

  <h1 id="myId" style="font-family:Lato,Helvetica,Arial,sans-serif;width:unset;display:flex;justify-content:space-between;">
  

补充说明 #

• 原外部CSS定义的float: left不需要额外处理，W3C规范明确flex容器的float属性会自动失效，不会影响flex布局
• 如果需要兼容IE11及更早版本，优先选择width: auto写法，unset属性不支持IE11以下版本
• 如果你可以修改CSS文件，也可以新增同优先级的规则覆盖原有定义，写法如下：

  h1#myId {
    width: auto;
    display: flex;
    justify-content: space-between;
  }
  

内容的提问来源于stack exchange，提问作者Eric