flex：1代表什么

1.定义和用法flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。2.CSS 语法：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;默认值：0

不爱吃糖的程序媛

7683人浏览 · 2022-03-11 16:06:24

不爱吃糖的程序媛 · 2022-03-11 16:06:24 发布

1.定义和用法

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

2.CSS 语法：

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
默认值： 0 1 auto
属性值
在这里插入图片描述

3.flex：1代表什么

先看代码

<div class="container">
  <div class="div">我是一个div</div>
  <div class="div">我是一个很多字div</div>
  <div class="div">我是一个更多字而且第三个div</div>
</div>
<style>
.container{
  display: flex;
}
.div{
  border: 1px solid red;
  flex: 1;
}

</style>

效果图
在这里插入图片描述
利用 flex: 1; 确实实现了三个不同内容的 div 平分空间,
flex:1; 即就是代表均匀分配元素；
flex: 1; === flex: 1 1 0;

这是完整写法, 详见mdn, 它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)

第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小；设置为auto的时候，会根据盒子内容的多少自动撑开盒子，它里面的每个盒子的宽度是不一样的。