美文网首页
3.Flex布局

3.Flex布局

作者: YFBigHeart | 来源:发表于2023-02-27 21:02 被阅读0次

目标: 能够使用Flex布局模型灵活、快速的开发网页

  • Flex布局/弹性布局:
    • 是一种浏览器提倡的布局模型
    • 布局网页更简单、灵活
    • 避免浮动脱标的问题
    • 布局非常适合结构化布局

目标:能够使用Flex布局模型灵活、快速的开发网页

设置方式

  • 父元素添加 display: flex,子元素可以自动的挤压或拉伸
    组成部分
  • 弹性容器
  • 弹性盒子
  • 主轴
  • 侧轴 / 交叉轴


    image.png

主轴对齐方式

使用justify-content调节元素在主轴的对齐方式,在Flex布局模型中,调节主轴或侧轴的对齐方式来设置盒子之间的间距.


image.png
侧轴对齐方式
image.png
伸缩比
image.png

相关文章

网友评论

      本文标题:3.Flex布局

      本文链接:https://www.haomeiwen.com/subject/uykkldtx.html