2021年山东省安全员C证考试题库及山东省安全员C证考试资料

第一行代码第九章使用网络技术Android11

  返回  

flex布局小结

2021/8/21 20:20:15 浏览:

  操作方便,布局极为简单,可以自适应屏幕的大小 移动端用的比较多,PC端浏览器支持情况较差
  任何一个容器都可指定为flex布局
  给父元素设置display:flex 从而控制孩子的摆放
父亲常见属性:
    flex-direction设置主轴的方向,元素是跟着主轴排列的
     默认 row从左到右   
     row-reverse  倒叙
     cllumn  从上到下
  justify-content 设置主轴上的子元素排列方式:
     flex-start 默认从头部开始
     flex-end   从尾部开始
     center       居中对齐
     space-around  平分剩余空间
     space-between  先两边贴边,在分配剩余的空间
  flex-wrap 设置子元素是否换行  
  默认子元素不换行flex-wrap:nowrap  如果装不下会缩小子元素的宽度,放到父元素里边
   flex-wrap:wrap 换行
   align-items 单行 设置侧轴上的子元素排列方式
     flex-start 默认从头部开始
     flex-end   从尾部开始
     center       居中对齐
     align-items:stretch 拉伸  但不能设置高度
     align-content 多行 侧轴元素的对齐方式
  flax-flow 是flex-direction flex-wrap 复合属性
子项属性 :
   flex属性  定义子项目分配剩余空间,用flex表示占多少分数
    子元素不设置宽度
    flex:num
    align-self 控制子项自己在侧轴的排列方式
    order 定义项目的排列顺序 数值越小,排名越靠前

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号