在我们常用的flex布局中，有对父元素设置的flex属性，也有对子元素设置的flex属性。而flex:1是对子元素设置的属性。

flex属性：flex-grow，flex-shrink、flex-basis的简写，默认0，1，auto，后面两个属性可选。

flex：1默认即flex-grow:1

这时我们需要对三个属性的定义进行了解

flex-grow:属性定义子元素或者子容器的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小.

flex-basis:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。可以设置像素，如

flex-basis:200px

下面我们对三个属性分别实现以下效果

html代码如下

<div class="parent"><div class="child1">1</div><div class="child2">2</div><div class="child3">3</div></div>

flex-grow属性

.parent{display: flex;}.child1 {background-color: #bfa;/* 属性定义子元素或者子容器的放大比例，默认为0，即如果存在剩余空间，也不放大。 */flex-grow: 1;}.child2 {background-color: #af0;flex-grow: 2;}.child3 {background-color: #aaa;flex-grow: 1;}

效果如下

因此我们可以通过flex-grow属性，来任意控制每一个块的比例。非常方便！

flex-shrink属性

.child1 {background-color: #bfa;/* 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 */flex-shrink: 1;}.child2 {background-color: #af0;flex-shrink: 1;}.child3 {background-color: #aaa;flex-shrink: 1;}

效果如下

注：之所以还有条状存在屏幕最左边，是因为我在每个盒子内都放置了一个数字。占用了盒子的大小。如果盒子内没有内容，就看不到上面的效果了。

flex-basis属性

.parent{display: flex;}.child1 {width: 100%;height: 100px;background-color: #bfa;flex-basis:400px;}.child2 {width: 100%;height: 100px;flex-basis:400px;background-color: #af0;}.child3 {width: 100%;height: 100px;background-color: #aaa;}

效果如下

这个属性你可以理解为width,它可以用像素表示。例如，flex-basis:400px;

当我们理解了这三个属性，也就明白了flex：1的意思了，其实完整写法是下面这样

flex:1 0 auto;

只不过后两个属性可以省略。

最后如果对你有帮助的话，记得点赞哦！

Flex布局之flex：1相关推荐

Flex布局：Flex布局
1.flex布局与传统布局的区别传统布局: 兼容性好但是布局繁琐局限性,不能再移动端很好的布局 flex布局: 操作方便,布局简单,移动端应用广泛但是IE11或更低版本不支持flex布局使用范 ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
weex默认的flex布局_CSS flex布局入门
来源 | https://www.jianshu.com/p/1e40b1d3f20b 一. why flex 都知道html正常的文档流是自上而下排列的,块级元素会像下左图一样排列.但是项目中尤其是 ...
flex布局（flex 居中）
文章目录什么是flex 基本概念容器的属性 flex-direction flex-wrap flex-flow justify-content align-items align-content ...
flex布局（flex容器，flex属性）
文章目录前言一.flex(Flexible Box)概述二.flex容器,flex属性 1.flexBox弹性模型 2.基本概念详解 3.弹性容器的属性 4.弹性元素的属性 5.圣杯布局 6.垂 ...
flex布局设置flex后容器被内容撑开
就和图片中的效果一样.容器大小是不确定的,要根据内容来决定.但是被内容撑开,使用word-wrap:break-word;强制换行文字和字母无效这时将盒子的width设置为 0 ,然后使用 flex ...
Flex布局、flex容器和flex项目
1. Flex布局基础知识 ⑴ Flex弹性布局.任何一个HTML元素都可以指定为flex布局. Display:inline-flex; flex容器是内联块元素 Display:flex:flex ...
html flex布局换行,flex布局下换行兼容问题
最近使用flex布局大体上都没问题,就是一些版本都存在一点兼容问题尤其是换行的时候,我们来看下面的Less 文件! 各大浏览器兼容都写好了!但是还是存在换行问题 ,看列子 .flex-block() ...
html flex布局换行,flex布局换行后间隙问题
问题描述今天遇到flex布局换行后产生间隙的问题,本来预期得到以下结果 pre.PNG 具体实现如下: flex布局换行后间隙问题 html,body{ width: 100%; height: 1 ...

Flex布局之flex：1

flex属性：flex-grow，flex-shrink、flex-basis的简写，默认0，1，auto，后面两个属性可选。

flex：1默认即flex-grow:1

这时我们需要对三个属性的定义进行了解

flex-grow:属性定义子元素或者子容器的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小.

flex-basis:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。可以设置像素，如

flex-basis:200px

下面我们对三个属性分别实现以下效果

flex-grow属性

flex-shrink属性

flex-basis属性

Flex布局之flex：1相关推荐

最新文章

热门文章