美文网首页
flex布局中flex:1;三个值代表

flex布局中flex:1;三个值代表

作者: persistlu | 来源:发表于2020-07-07 10:23 被阅读0次

flex:1

flex-basis

flex-basis 用于设置子项的占用空间。(该属性用来设置元素的宽度,其实,width也可以设置宽度。如果元素上同时设置了width和flex-basis,那么width 的值就会被flex-basis覆盖掉。)


flex-grow

用来“瓜分”父项的“剩余空间”。(当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何索取分配父元素的剩余空间。值越大,索取的越厉害。)

flex-shrink

用来“吸收”超出的空间(父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。值越大,减小的越厉害。)

相关文章

  • flex布局中flex:1;三个值代表

    flex:1 flex-basis flex-basis 用于设置子项的占用空间。(该属性用来设置元素的宽度,其实...

  • flex-grow、flex-shrink、flex-basis

    flex-grow、flex-shrink、flex-basis这三个属性的作用是:在flex布局中,父元素在不同...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • css:About Flex

    * 弹性布局 * 创建弹性布局容器:flex containerdisplay:flex 1.弹性元素 flex ...

  • flex布局

    flex布局 当有三个子div时 未设置布局时 display: flex; 设置了弹性布局后 flex-wrap...

  • 小程序页面布局样式元素总结

    1:Flex布局 Flex布局如图1所示 1.1 Flex容器属性 1.2 Flex容器内元素属性 align如果...

  • flex布局学习之flex属性

    语法 flex: flex-grow flex-shrink flex-basis主要有三个值flex-grow,...

  • Day02_flex布局

    一、flex布局介绍: 1、又名Flexible 布局,弹性布局;2、开启了 flex 布局的元素叫 flex c...

  • 2019-05-14 css mobx

    flex布局 只在flex布局中(display:flex)有效的属性(持续更新): justify-conten...

  • electron一些小坑

    1.flex布局问题在浏览器中使用flex:1实现自适应布局没有问题,但在electron中设置flex:1的子元...

网友评论

      本文标题:flex布局中flex:1;三个值代表

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