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 规范文 ...
随机推荐
- .NET混合开发解决方案14 WebView2的基本身份验证
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- 负载均衡之DR实验
实验环境 本实验搭建在虚拟机中.一台服务器作为DR两台作为RS,还有一台为后续内容会用到的备用机. 实验环境示意图: 1. 修改网络层VIP 修改DR,添加VIP 修改前: 修改后: 修改RS,修改A ...
- Flask 之 高可用IP代理网站
高可用代理IP网站 目标:提供高可用代理IP 步骤一:通过爬虫获取代理IP 步骤二:对代理IP进行检测,判断代理是否可用 步骤三:将可用的代理IP写入mongodb数据库 步骤四:创建网站,从数据库获 ...
- 【多线程与高并发原理篇:4_深入理解synchronized】
1. 前言 越是简单的东西,在深入了解后发现越复杂.想起了曾在初中阶段,语文老师给我们解说<论语>的道理,顺便给我们提了一句,说老子的无为思想比较消极,学生时代不要太关注.现在有了一定的生 ...
- 花两万培训Java的三个同学,最后都怎么样了
仙路尽头谁为峰,学完Java学Python. 前言 对于IT行业的培训,例如Java.大数据.H5等等,我一直保持着肯定的态度. 因为当年大学时期的我,也差点去参加Java培训.一是因为那时钱包空空, ...
- C++ 获取指定的重载函数地址
刚刚看到一篇博客,说 std::bind 无法绑定正确的重载函数.这里的问题并不是 std::bind 能力不足,而是将函数名传递给 std::bind 时编译器无法取到这个函数的地址(也就是符号,编 ...
- 深度学习与CV教程(13) | 目标检测 (SSD,YOLO系列)
作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/37 本文地址:http://www.showmeai.tech/article-det ...
- easyui combobox重复渲染问题
当一个页面有两个easyui combobox存在时,并且同时给两个combobox赋相同值,某些easyui的版本会导致其中一个无法切换选项. 解决办法,分两步赋值,可解决问题
- 快速保存Win10锁屏壁纸,收获美丽瞬间
对于写程序而言,每天接触得最多的就是电脑了 所以保持一种开放乐观,豁达美丽的心情是十分有必要的 使用"Everything"工具,输入"LocalState\Assets ...
- centos 7安装gitlab及使用
GitLab 概述: 是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的 Git 项目仓库,可通过 Web界面迚行访问公开的戒者私人项目.Ruby on Rails 是一个可 ...