Flex学习笔记

  • flex: 比重,等价于weight
  • flexDirection:方向
    横向:row, row-reverse;
    竖向:column ,column-reverse
  • justifyContent:决定其子元素沿着主轴的排列方式,
    flex-start 集中在最上方
    center 整体竖向居中
    flex-end 集中在最下方
    space-around 均匀分布
    space-between 均匀铺满
  • alignItems:决定其子元素沿着次轴的排列方式,次轴与主轴垂直
    flex-start 集中在最左边
    center 整体横向居中
    flex-end 集中在最右边
    stretch 水平撑满,子组件不能设置固定的width。
    (不设置alignItems时,默认是flex-start)
    注意外层容器要加上flex:1,让组件有足够的空间。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本文转载Flex 布局教程 一,什么是flex布局 Flex 是 Flexible Box 的缩写,意为"弹性布局...
    旺仔叔阅读 200评论 0 0
  • 浏览器支持: chrome 21+ opera 12.1 + firefox 22+ safari 6.1+ ie...
    markpapa阅读 235评论 0 1
  • 前几天看到了阮一峰的网络日志2015年出的Flex布局教程:语法篇和Flex 布局教程:实例篇感受颇深,所以借鉴的...
    男卅_卅阅读 437评论 0 1
  • flex-direction:设置元素的排列方向 row:从左向右row-reverse:从右向左column:从...
    老婆日向雏田阅读 1,529评论 0 0
  • flex 基本概念 flex容器 容器 主轴开始位置 -- main start结束位置 -- main en...
    lzb30阅读 215评论 0 0

友情链接更多精彩内容