flex这些问题应该被理解
flex三连问,帮助我们更好的理解布局利器
问题:
- flex的值 auto, none, 0, 1, initial分别是什么?有什么作用?有什么表现?
- flex-basis和width的区别?单值flex-basis:0与auto的区别?flex-basis:100px与width:100px一样吗?
- 怎样理解剩余空间?
解决:
问题一:
flex的值 auto, none, 0, 1, initial分别是什么?
flex: auto 为 1 1 auto
flex: none为 0 0 auto
flex: 0为 0 1 0
flex: 1为 1 1 0
flex: initial为 0 1 auto
提一嘴,我认为重要的是这个flex的默认值,也就是initial。因为多数情况,我们都是在默认值上修改,其他再不容易记的东西,也会有了参照而变得游刃有余。
上述五种情况的作用及表现什么?
- flex:initial(默认值)
父盒子设置为弹性盒,子元素默认就为initial,一般用于还原默认值
表现为不会随之增大,会随之减小,宽度参照自身
- flex:1
一般用于等分(分配剩余空间后,表现为等分)
表现为会随之增大,会随之减小,宽度内容区最小宽度(分配剩余空间前)
- flex:0
不常用
表现为不会随之增大,会随之减小,宽度内容区最小宽度(分配剩余空间后)
- flex:auto
一般用于文字越长,元素越宽的场景
表现为会随之增大,会随之减小,宽度参照自身
- flex:none
一般用于保持元素自身宽度,且文字不换行
表现为不会随之增大,不会随之减小,宽度参照自身
问题二:
flex-basis和width的区别?单值flex-basis:0与auto的区别?
两者都是用于改变弹性盒元素的宽度
flex-basis比width优先级更高;
如果flex-basis为auto,那么元素就会参照width
如果flex-basis不为auto(如:0,200px等),那么元素就会忽略width(即使你设置了width),采用flex-basis的值
flex-basis:100px与width:100px(弹性盒可缩减为前提条件)一样吗?
首先说结论,不一样!!!
width:100px
+flex-basis:auto
=== 元素100px
content
+flex-basis:100px
===max
(content
,flex-basis:100px
) >= 元素100px
剖析一下,有以下两种情况:
元素flex-basis为auto时,width设为100px,那么当缩小弹性盒时,元素始终为100px,不会变化。那么如果该元素内容区宽度超过100px(比如内嵌的图片,font-size大小等),那么也不会撑大该元素,它就是个定值100px
元素flex-basis不为auto时,width设为多少都没用,优先取flex-basis的值。若flex-basis为100px,那么如果该元素内容区宽度超过100px(比如内嵌的图片,font-size大小等),那么与设置width结果相反,会撑大该元素,最后计算的宽度会大于100px。
width就是写死,无论怎么变,该元素就是这么宽;flex-basis意思是,元素大概是这么宽,如果有意外情况,那么我还会改变。
举个小栗子帮助理解下:你晚上在加班,女朋友要让你陪她一个小时,但是女人的嘴,骗人的鬼,指不定耽误多长时间呢。然后。。。
width的理解:我是个负责任的男人,一个小时一分不多一分不少,不会因为任何说法改变这一个小时。
flex-basis的理解:女朋友比任何事都重要,如果她不闹腾,那么一个小时就准时结束,否则,我只能由着她的性子来了。唉,折腾到明早也有可能,没办法,谁让她最重要呢?
问题三:
怎样理解剩余空间?
开启弹性盒的元素的宽度为总空间
去掉所有子元素的固定宽度后,剩余的空间就叫做剩余空间
子元素有width属性,那么去掉width就是剩余空间
子元素有flex-basis:100px
如果100px小于总宽度,那么去掉flex-basis就是剩余空间
如果100px大于总宽度,那么没有剩余空间
如果缩减系数flex-shrink为0,那么元素就是100px,表现为超出父盒子
如果缩减系数flex-shrink不为0,元素的最终宽度也要少于100px
flex这些问题应该被理解的更多相关文章
- 30分钟彻底弄懂flex布局
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...
- 弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...
- 聊一聊 Flex 中的 flex-grow、flex-shrink、flex-basis
在使用 flex 布局的时候难以理解的是 flex-grow.flex-shrink.flex-basis 几个属性的用法,下面通过几个例子来演示. flex-basis flex-basis 用于设 ...
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- 布局神器:Flexbox
最近的工作内容大多是移动端网页的开发,百分比布局,Media Queries,Bootstrap等常规的响应式/自适应的开发技术皆一一试过,但觉以上都不够灵活,所以,一直再尝试寻求更加灵活的精确的移动 ...
- React Native基础&入门教程:初步使用Flexbox布局
在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...
- CSS box-flex属性,然后弹性盒子模型简介
今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...
- css基础--深入理解弹性盒flex布局
欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...
- 深入理解 flex 布局以及计算_Flexbox, Layout
起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文 ...
随机推荐
- ansible模块的介绍与使用
ansible-doc的使用 1.ansible-doc -h可以看见ansible-doc的所有参数 2.ansible-doc 命令格式:ansible-doc [-l|-F|-s] [optio ...
- 1.Docker简介
Docker是个什么东西 假定您在开发一个项目,您使用的是一台笔记本电脑而且您的开发环境具有特定的配置.其他开发人员身处的环境配置也各有不同.您正在开发的应用依赖于您当前的配置且还要依赖于某些配置文件 ...
- SpringBoot接入两套kafka集群
引入依赖 compile 'org.springframework.kafka:spring-kafka' 第一套kafka配置 package myapp.kafka; import lombok. ...
- 【拖拽可视化大屏】全流程讲解用python的pyecharts库实现拖拽可视化大屏的背后原理,简单粗暴!
"整篇文章较长,干货很多!建议收藏后,分章节阅读." 一.设计方案 整体设计方案思维导图: 整篇文章,也将按照这个结构来讲解. 若有重点关注部分,可点击章节目录直接跳转! 二.项目 ...
- Kafka 生产者解析
一.消息发送 1.1 数据生产流程 数据生产流程图解: Producer创建时,会创建⼀个Sender线程并设置为守护线程 ⽣产消息时,内部其实是异步流程:⽣产的消息先经过拦截器->序列化器-& ...
- 使用 awk 命令统计文本
2022-04-19 11:25:15.008,b4d13bfca8fe4b93a85e65a88520d945,LogScheduler#printLog,10ms,Y,xxxxxxxx 2022- ...
- Jmeter接口参数化<自动化>(csv文件)管理测试用例以及断言
1.创建相关线程组(不解释) 2.创建相应的请求(在请求中设置变量) 下面截图中①②③④⑤⑥⑦皆可以设置为变量 3.新建CSV文件 将请求中设置的变量为明确了解每个字段的含义(皆可以将变量填写到列表的 ...
- Python装饰器,Python闭包
可参考:https://www.cnblogs.com/lianyingteng/p/7743876.html suqare(5)等价于power(2)(5):cube(5)等价于power(3)(5 ...
- 2021蓝桥杯省赛C++A组试题E 回路计数 状态压缩DP详细版
2021蓝桥杯省赛C++A组试题E 回路计数 状态压缩DP 题目描述 蓝桥学院由21栋教学楼组成,教学楼编号1到21.对于两栋教学楼a和b,当a和b互质时,a和b之间有一条走廊直接相连,两个方向皆可通 ...
- NODE.JS exports require理解
node.js exports 的作用是什么? 因为A.js文件想访问B.js文件中的类或函数,是不能直接访问的.为了解决这个问题 node.js 产生了 exports ,exports 实际可以理 ...