flex基本了解(伸缩容器中项目)

伸缩容器中的项目

1.order项目的排列顺序 数字越小越靠前 默认是0

2.flex-grow 定义伸缩项目的放大比例,默认为0,即表示如果存在剩余空间,也不放大。前期是如果有剩余空间

3. flex-basis 用来设置伸缩项目的基准值,剩余的空间按比例进行伸缩。语法为 :flex-basis:lenth | auto . 默认值是 auto

4. align-self 用来设置伸缩项目在交叉轴上的对齐方式

  • auto 自动
  • flex-start 以交叉轴的开始位置
  • flex-end 以交叉轴的结束位置
  • center 以交叉轴的中间位置
  • baseline 以交叉轴的基准线
  • stretch (如果交叉轴为垂直方向的话,只有在不设置高度的话,才能看到效果 )(伸缩项目在交叉轴方向占满容器)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,881评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,111评论 0 26
  • flex布局基础知识 main axis(主轴): Flex容器的主轴主要用来配置Flex项目。它不一定是水平,这...
    前端小兵阅读 3,388评论 0 1
  • 前言 FlexBox是css3的一种新的布局方式,天生为解决布局问题而存在的它,比起传统的布局方式,我们使用Fle...
    zevei阅读 5,254评论 23 3
  • 在以前页面布局多依赖于table,但table标签太多,于是有了absolute布局,float布局等,但它们小问...
    张歆琳阅读 9,686评论 3 55