flex布局

ryanchosen
205 阅读2分钟

flex-direction决定了主轴方向,主轴定完了，交叉轴也就定完了

justify-content(to box)

  • 假设主轴已经是横向的定完了
  • justify-content就是用手去横向如何拨动这串珠子

align-items(to box)

  • 假设主轴已经是横向的定完了
  • align-items就是如何纵向拨动这串珠子

align-self(to item)

  • 假设主轴已经是横向的定完了
  • 交叉轴方向如何拨动珠子也选择了top，也就是都在顶部
  • 那么如何对某一颗特别有想法的珠子让它到底部呢？
  • align-self默认是auto即 每颗珠子都继承自box的align-items，这点很好理解

flex布局与margin-xxx:auto 实现水平居中

container属性与item属性

flex布局只有两类属性，一类是container属性一类是item属性
containter属性只需要记住一下这些最常用的即可:

display:flex;
flex-direction:row/column;
flex-wrap:wrap;
justify-content:center/space-between;
align-items:center;

flex基础

代码示例

flex-grow与flex-shrink

  • flex-grow常用于在浏览器宽度拓宽时导航栏中几块区域的item的增长的快慢程度
    • flex-grow:1 常用于设置中间区域拿到整行空余宽度的所有宽度，宽度最大化
  • flex-shrink用于控制当浏览器宽度在缩小时导航栏中几块区域的item被挤压的快慢程度
    • flex-shrink要求item本身是定宽的

代码示例

flex属性与flow属性都是复合属性

复合的原因是子属性通常结合出现相使用

  • flex:grow shrink basis 三者相结合 flex-MDN
  • flow:flex-direction flex-wrap 二者相结合
    • flex-direction决定了主轴方向
    • flex-wrap决定了副轴方向

flex青蛙小游戏

游戏链接

flex做的综合案例

  • 如果想用flex去做平均布局的话要注意，如果是一行item数多于2，就要做特殊处理了
  • 不能仅仅是简单粗暴的对父元素justify-content:space-between
  • 因为要考虑到最后一行item数凑不满的话space-between就丑了 代码示例

inline-flex

avatar
文章
阅读
粉丝