flex：1代表什么

2024-04-06 10:24:51

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的时候，会根据盒子内容的多少自动撑开盒子，它里面的每个盒子的宽度是不一样的。

flex：1代表什么相关推荐

css属性flex:1代表什么
1. 简单介绍flex布局 flex布局则是一种布局方案,设置父div的css属性display:flex,即可实现flex布局.该父div即为容器,而其内的子元素(如子div)称为项目. 容器和项目 ...
flex:1；到底代表什么
前言:在最初学习flex布局的时候,关于flex: 1;的概念很模糊,只是简单的认为flex: 1; 代表一份: flex: 2;代表两份....后面遇到了关于弹性布局的一系列问题,于是将这个属性好好 ...
页面布局 - flex弹性布局
flex弹性布局 html: <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
默认布局换行_自学整理 CSS Flex 布局
引言最近记性特别不好,居然忘记 Flex 布局子项居中怎么写了,于是又看了一遍阮一峰老师的<Flex 布局教程>,为了能够加深记忆,边做记录边练习,因此整理本文作为自学笔记. 本文来源: ...
什么时候会是用treeset?_flex:1 到底代表什么?
今天在做项目的时候遇到一个关于布局的问题, 就是 flex: 1; 我一直以为 flex: 1; 代表的是 flex: aoto; 后来发现结果并不是这样, 所以写一篇博客来讲解一下 flex: 1; ...
flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex大小变化动画_Flex 4的十大变化
flex大小变化动画本周,Adobe发布了他们的第一个Flex 4正式Beta版,代号为Gumbo. 该版本包括许多重大更改. 此列表提供了流行的RIA框架的最新版本中已更改项目的高级概述. 1.与 ...
详解 flex:1 到底是什么
前言 flex布局在前端开发中是必不可少的,它打破了原来块级盒子自上向下排列的规则,使得开发者们可以更自由的排列盒子.flex:1相信大家在开发当中都没少写,但是它具体是什么意思相信很多人还不清楚,下 ...
2020-10-29
实验一 TINY语言的词法分析一.实验目的 (评价依据,描述是否准确到位) 利用第三方的lex工具构造tiny语言的词法分析器(扫描器)并使得构造出的扫描器能够读入教材样例中给出的tiny语言的示例 ...

最新文章

热门文章