Chaoszhu'Blog

Appearance

flex弹性布局 ​

兼容情况 ​

caniuse

大部分flex属性兼容IE10+ IE10、IE11存在部分bug，一般不影响使用. 兼容大部分低版本安卓旧机型

  • 部分属性不兼容IE，例如：space-evenly

justify-content 主轴 ​

justify-content: space-around ​

按主轴方向将每个元素的两侧均相等分布。 image

justify-content: space-evenly ​

每个元素之间的距离相等

align-items 交叉轴 ​

默认值：stretch(拉伸，与其他兄弟元素宽/高保持一致。可设置flex-start为auto高度)

设置了高度，无作用image

当元素没有设置高度才有作用image

flex-wrap 处理超出宽度时自动换行 ​

设置元素总宽度超出显示器宽度时并不会自动换行，flex-wrap: no-wrap;（默认值） image

如何让最后一个元素左对齐【最后一行只有一个元素，且列于列之间没有margin】 ​

给最后一个元素添加margin-right：auto; 即可。

如何让最后一个元素左对齐【justify-content: space-between;而不是space-evenly】 ​

给父元素加一个伪元素(子元素)

css
ul:after {
  content: "";
  width: 30%; // 宽度同li
}

flex的简写属性 ​

参考

主要就是flex-grow: 1;起作用，如何分配主轴上的剩余空间。

flex: 1; 【flex-grow:1； flex-shrink:1；(默认值),flex-basis:auto(默认值)】 ​

flex-grow: 1; 定义主轴上的剩余空间如何瓜分。默认为0, 即不瓜分；【grow：扩大】

flex-shrink: 1; 默认值是 1,即平均压缩；当空间不够时如何压缩, 默认会被压缩(默认不换行)。【shrink：收缩】

  • 注意1：如果子容器没有超出父容器，设置 flex-shrink 无效
  • 注意2：如果子容器超出父容器，flex-shrink默认为1的子容器会被压缩(哪怕设置了width)，此时设置为0即可不受其他兄弟元素挤压

flex-basis: auto; 定义元素在主轴上的宽度优先级：max-width/min-width > flex-basis > width