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 规范文 ...
随机推荐
- 爬虫--Scrapy框架的初步使用
1.scrapy在windows环境下安装 - 环境的安装: a. pip3 install wheel b. 下载twisted: http://www.lfd.uci.edu/~gohlke/py ...
- 国产开源优秀新一代MPP数据库StarRocks入门之旅-数仓新利器(上)
概述 背景 Apache Doris官方地址 https://doris.apache.org/ Apache Doris GitHub源码地址 https://github.com/apache/i ...
- windows 文件hash校验,字符串加密,base64转换工具
对下载的文件使用hash校验验证文件完整性 1 import hashlib 2 def md5(): 3 md5_value = hashlib.md5() 4 with open('C:\Inte ...
- 693. Binary Number with Alternating Bits - LeetCode
Question 693. Binary Number with Alternating Bits Solution 思路:输入一个整数,它的二进制01交替出现,遍历其二进制字符串,下一个与上一个不等 ...
- linux篇-linux面试题汇总
Linux经典面试题,看看你会几题? 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统 ...
- 基于SqlSugar的开发框架循序渐进介绍(5)-- 在服务层使用接口注入方式实现IOC控制反转
在前面随笔,我们介绍过这个基于SqlSugar的开发框架,我们区分Interface.Modal.Service三个目录来放置不同的内容,其中Modal是SqlSugar的映射实体,Interface ...
- C++从静态类型到单例模式
目录 1. 概述 2. 详论 2.1. 静态类型 2.1.1. 静态方法成员 2.1.2. 静态数据成员 2.2. 单例模式 2.2.1. 实现 2.2.2. 问题 3. 参考 1. 概述 很多的知识 ...
- 【原创】项目四Tr0ll-1
实战流程 1.nmap枚举 nmap -sP 192.168.186.0/24 nmap -p- 192.168.186.142 nmap 192.168.186.142 -p- -sS -sV -A ...
- pandas:多层索引
多层索引是指在行或者列轴上有两个及以上级别的索引,一般表示一个数据的几个分项. 1.创建多层索引 1.1通过分组产生多层索引 1.2由序列创建 1.3由元组创建 1.4可迭代对象的笛卡尔积 1.5将D ...
- MySQL - 并发事务出现的问题
1. 脏读 含义:在事务过程中,读到了其它事务为提交的数据. 解决方法:将数据库事务提升到读已提交或以上的隔离级别. 2. 不可重复读 含义:一次事务中,两次读操作中,读出来的数据内容不一致. 解决方 ...