美文网首页
flex基本了解(伸缩容器中项目)

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

作者: 基本密码宋 | 来源:发表于2017-09-08 16:36 被阅读29次

伸缩容器中的项目

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 (如果交叉轴为垂直方向的话,只有在不设置高度的话,才能看到效果 )(伸缩项目在交叉轴方向占满容器)

相关文章

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

    伸缩容器中的项目 1.order项目的排列顺序 数字越小越靠前 默认是0 2.flex-grow 定义伸缩项目的放...

  • flex基本了解(伸缩容器)

    伸缩容器的属性 1.display flex 块级伸缩容器 inline-flex 行内级伸缩容器 2.flex-...

  • CSS伸缩布局

    伸缩布局(弹性布局) display:flex 给谁添加了display:flex,谁就是伸缩容器 伸缩容器中的盒...

  • Flexbox的伸缩属性

    首先需要了解H5中盒子模型的flex-box的属性,其可以分为伸缩容器属性和伸缩Item属性 伸缩容器的属性 1....

  • flex布局基本语法

    1:基本概念:(容器和项目)容器:采用flex布局的元素,称为flex容器;项目:容器中的所有子元素自动称为容器的...

  • flex布局

    标签: css flex摘自: React Native入门与实战 flexbox 即由伸缩容器和伸缩项目组成,按...

  • CSS阶段五:flex伸缩盒模型,自适应布局

    flex/inlineflex 伸缩盒模型(快速布局利器) 该元素即成为伸缩容器(flex container) ...

  • 28-(flex)伸缩布局/弹性布局

    主轴和侧轴 注意:flex:将一个容器设置为块伸缩容器inline-flex:将一个容器设置为内联 伸缩容器 注意...

  • FlexBox布局属性笔记

    display: 表示为伸缩容器 参考属性: flex |设置为容器 inline-flex| 行内元素设置容器...

  • flex弹性布局

    伸缩容器的属性 display: flex 定义为弹性布局 flex-direction 决定主轴的方向 flex...

网友评论

      本文标题:flex基本了解(伸缩容器中项目)

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