24-弹性布局

谁家好人学前端啊
95 阅读4分钟

弹性布局

  • 传统布局

    • display+float+position进行布局

      • 不足

        • 浮动同行显示后需要清除浮动带来的影响
        • 手动计算调整盒子和盒子之间的间距，比较麻烦
        • 各种对齐问题

      • 好处

        • 兼容性好

  • 弹性布局

    • css3提出了一套自适应的布局模式，可以辅助传统布局

设置

display:flex|inline-flex;
  • inline-flex：对于其他兄弟标签来说是一个行级元素，对于子元素能够同行显示
  • flex：对于其他兄弟标签来说是一个块级元素，对于子元素能够同行显示

弹性盒模型

image-20221201093710580

  • 弹性容器：包裹弹性项目的父元素
  • 弹性项目：在弹性容器中包裹的每个子元素
  • 主轴：弹性项目同行显示的方向
  • 侧轴：跟主轴垂直的方向

特点

  • 元素能够进行同行显示，排列不下时按照比列压缩显示，不会换行
  • 弹性容器不设置高度，高度会由内容撑开
  • 弹性容器只对直接子元素有效

弹性容器属性

  • flex-wrap：设置弹性项目是否换行显示

    flex-wrap:nowrap|wrap
    • nowrap：默认值，表示不换行
    • wrap：表示换行显示

  • flex-direction：设置主轴方向和元素排列顺序

    flex-direction:row|row-reverse|column|column-reverse
    • row:默认值,水平方向作为主轴,弹性项目按照从左到有顺序排列
    • row-reverse:水平方向作为主轴,弹性项目按照从右到左顺序排列
    • column:垂直方向作为主轴,弹性项目按照从上到下顺序排列
    • column-reverse:垂直方向作为主轴,弹性项目按照从下到上顺序排列

  • justify-content：设置主轴的富裕空间分配

    justify-content
    • flex-start:默认值，将富裕空间放在弹性项目之后显示
    • flex-end:将富裕空间放在弹性项目之前显示
    • center:将弹性项目放在主轴居中位置
    • space-between:弹性项目首尾紧靠弹性容器,弹性项目之间进行均分
    • space-around:将富裕空间均分在每一个弹性项目两侧
    • space-evenly:每个弹性项目之间的距离都相等,包括弹性项目和弹性容器之间的距离

  • align-items：设置侧轴的富裕空间分配

    align-items
    • flex-start:默认值，将富裕空间放在弹性项目之后显示
    • stretch：默认值，如果当前弹性项目没有设置高度，默认弹性项目撑满弹性容器显示
    • flex-end:将富裕空间放在弹性项目之前显示
    • center:将弹性项目放在主轴居中位置

弹性项目属性设置

  • align-self：设置侧轴的富裕空间分配

    align-self
    • flex-start:默认值，将富裕空间放在弹性项目之后显示
    • stretch：默认值，如果当前弹性项目没有设置高度，默认弹性项目撑满弹性容器显示
    • flex-end:将富裕空间放在弹性项目之前显示
    • center:将弹性项目放在主轴居中位置

  • flex-shrink：压缩因子

    flex-shrink:数字;
    • 注意：默认值为1，数字越大，表示压缩比例越大，弹性项目越小
  • 压缩总宽度 = 弹性项目总宽度 - 弹性容器总宽度弹性项目的压缩空间 = 压缩总宽度/压缩因子总数  * 当前弹性项目的压缩因子弹性项目大小 = 设置宽度 - 弹性项目的压缩空间

  • flex-grow：弹性因子

    flex-grow：数字;
    • 注意：默认值为0，数字越大，表示弹性比例越大，弹性项目越大
    弹性总宽度 = 弹性容器总宽度 - 弹性项目总宽度弹性项目的弹性空间 = 弹性总宽度/弹性因子总数  * 当前弹性项目的弹性因子弹性项目大小 = 设置宽度 + 弹性项目的弹性空间

  • order：表示弹性项目的显示位置

    order:数字;
    • 注意：默认为0，数字越大，弹性项目显示越靠后。数字相等时按照文档结构排列

  • flex-basis：表示默认宽度

    flex-basis
    • 优先级高于width

富裕空间

  • 弹性容器中，除了弹性项目之外的剩余空间
avatar
文章
阅读
粉丝