移动端的Flex布局

目录

引入

一、传统布局与flex布局

传统性

flex布局

二、felx的特点

三、flex布局父项的常见属性

四、flex布局子项的常见方向

 总结


引入

flex 是 flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局

一、传统布局与flex布局

传统性

  • 兼容性好
  • 布局繁琐
  • 局限性,不能在移动端很好的布局

flex布局

  • 操作方便,布局极为简单
  • PC端浏览器支持比较差
  • IE 11或更低版本

建议:移动端使用flex布局,PC端使用传统即可

二、felx的特点

  • 当为盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素,称为flex容器,简称’容器‘,它的所有子元素自动转换为容器成员,成为flex项目(flex item),简称“项目”

移动端的Flex布局_第1张图片

三、flex布局父项的常见属性

  • flex-direction:设置主轴的方向————(默认水平向右,可以进行变换)
  • justify-content:设置主轴上的子元素排列方式————(默认水平向右,可以进行变换)
  • flex-wrap:设置子元素是否换行
  • align-content:设置侧轴上的子元素的排列方式(多行)
  • align-items:设置侧轴上的子元素排列方式(单行)
  • flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrapflex 。

属性详情:Web前端培训:flex布局中父元素常用属性总结_flex父元素属性_让你五行代码的博客-CSDN博客

四、flex布局子项的常见方向

移动端的Flex布局_第2张图片

 总结

  • 移动端使用flex布局更方便

  • 通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

  • flex将布局更简单,更便捷

你可能感兴趣的:(前端,flex)