Flex 布局 flex-grow 占用空间

1、占用空间 flex-grow

没有设置 flex-grow 时：s1、s2、s3、s4 各宽度100，预留多余空白处。

s2设置 flex-grow 时：占用了多余空白处，增长了自身宽度，没有了多余的空白处，自身宽度也从宽度100加到了114。

s2和s3都设置了flew-grow时：同时平分了多余的空白处，并且自身宽度都增加了。

<!-- Flex 布局 -->
<view class="container"><view class="s1"></view><view class="s2"></view><view class="s3"></view><view class="s4"></view>
</view>.container{display: flex;
}
.s1{width: 100px;height: 100px;background-color: red;
}
.s2{width: 100px;height: 100px;background-color: yellow;flex-grow: 1;  /* grow字面意思是增长，占用多余空间的宽度，所以自身宽度会变宽 */}
.s3{width: 100px;height: 100px;background-color: blue;flex-grow: 1; /* 平分占用多余空间的宽度 */
}
.s4{width: 100px;height: 100px;background-color: orange;
}

Flex 布局 flex-grow 占用空间相关推荐

flex布局——flex布局
学习内容: 例如: 体验flex布局 flex布局父项常见属性 justify-content属性 flex-wrap属性 align-items属性 align-content属性 flex-flo ...
css_flex弹性盒模型/flex布局/flex在线可视化工具
文章目录 contents1: content 2: 测试你对flexbox的掌握 flex 模型 flex在线可视化工具(visual guide to css3 flexbox) flex布局 f ...
flex布局 flex布局的主轴对齐方式
认识flex布局 flex布局弹性布局使用flex布局标签之间没有元素之分(块行内行内块) 可以随意设置宽高父元素添加display:flex 弹性容器子元素自动变成弹性盒子(弹性盒子没有 ...
flex布局 flex全解 flex
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{displ ...
第103天：CSS3中Flex布局（伸缩布局）详解
一.Flex布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{display: ...
css flex布局 padding,css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）...
本篇文章给大家带来的内容是关于LNMP以源码的方式记录环境搭建的过程(详细),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果图: 圣杯布局圣杯 .container{ padd ...
flex布局 flex_时髦的Flickr Flex小部件
flex布局 flex A web widget, or badge, is a small, embeddable element that you can add to your site tha ...
Flex弹性盒子（一篇带你掌握潮流 Flex 布局）
文章目录 Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 1.2.Flex布局出现后 2.什么是Flex布局? 3.Flex container/item(父/子容器)的常用属性 4.L ...
flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
html布局属性,hTML之FLEX布局属性
HTML之flex布局 flex布局是什么 flex布局,中文意思为弹性布局,用来为盒模型提供最大的支持,如果靠简单的float,position,很难将页面做的好看.flex灵活性非常的好,任何一个 ...

Flex 布局 flex-grow 占用空间

1、占用空间 flex-grow

Flex 布局 flex-grow 占用空间相关推荐

最新文章

热门文章