flex三连问,帮助我们更好的理解布局利器

问题:

  1. flex的值 auto, none, 0, 1, initial分别是什么?有什么作用?有什么表现?
  2. flex-basis和width的区别?单值flex-basis:0与auto的区别?flex-basis:100px与width:100px一样吗?
  3. 怎样理解剩余空间?

解决:

问题一:

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。因为多数情况,我们都是在默认值上修改,其他再不容易记的东西,也会有了参照而变得游刃有余。

上述五种情况的作用及表现什么?

  1. flex:initial(默认值)
  • 父盒子设置为弹性盒,子元素默认就为initial,一般用于还原默认值

  • 表现为不会随之增大,会随之减小,宽度参照自身

  1. flex:1
  • 一般用于等分(分配剩余空间后,表现为等分)

  • 表现为会随之增大,会随之减小,宽度内容区最小宽度(分配剩余空间前)

  1. flex:0
  • 不常用

  • 表现为不会随之增大,会随之减小,宽度内容区最小宽度(分配剩余空间后)

  1. flex:auto
  • 一般用于文字越长,元素越宽的场景

  • 表现为会随之增大,会随之减小,宽度参照自身

  1. 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 === maxcontentflex-basis:100px) >= 元素100px
  • 剖析一下,有以下两种情况:

    1. 元素flex-basis为auto时,width设为100px,那么当缩小弹性盒时,元素始终为100px,不会变化。那么如果该元素内容区宽度超过100px(比如内嵌的图片,font-size大小等),那么也不会撑大该元素,它就是个定值100px

    2. 元素flex-basis不为auto时,width设为多少都没用,优先取flex-basis的值。若flex-basis为100px,那么如果该元素内容区宽度超过100px(比如内嵌的图片,font-size大小等),那么与设置width结果相反,会撑大该元素,最后计算的宽度会大于100px。

  • width就是写死,无论怎么变,该元素就是这么宽;flex-basis意思是,元素大概是这么宽,如果有意外情况,那么我还会改变。

    • 举个小栗子帮助理解下:你晚上在加班,女朋友要让你陪她一个小时,但是女人的嘴,骗人的鬼,指不定耽误多长时间呢。然后。。。

      • width的理解:我是个负责任的男人,一个小时一分不多一分不少,不会因为任何说法改变这一个小时。

      • flex-basis的理解:女朋友比任何事都重要,如果她不闹腾,那么一个小时就准时结束,否则,我只能由着她的性子来了。唉,折腾到明早也有可能,没办法,谁让她最重要呢?

问题三:

怎样理解剩余空间?

  1. 开启弹性盒的元素的宽度为总空间

  2. 去掉所有子元素的固定宽度后,剩余的空间就叫做剩余空间

  • 子元素有width属性,那么去掉width就是剩余空间

  • 子元素有flex-basis:100px

    • 如果100px小于总宽度,那么去掉flex-basis就是剩余空间

    • 如果100px大于总宽度,那么没有剩余空间

      • 如果缩减系数flex-shrink为0,那么元素就是100px,表现为超出父盒子

      • 如果缩减系数flex-shrink不为0,元素的最终宽度也要少于100px

flex这些问题应该被理解的更多相关文章

  1. 30分钟彻底弄懂flex布局

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...

  2. 弄懂flex布局

    目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...

  3. 聊一聊 Flex 中的 flex-grow、flex-shrink、flex-basis

    在使用 flex 布局的时候难以理解的是 flex-grow.flex-shrink.flex-basis 几个属性的用法,下面通过几个例子来演示. flex-basis flex-basis 用于设 ...

  4. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  5. 布局神器:Flexbox

    最近的工作内容大多是移动端网页的开发,百分比布局,Media Queries,Bootstrap等常规的响应式/自适应的开发技术皆一一试过,但觉以上都不够灵活,所以,一直再尝试寻求更加灵活的精确的移动 ...

  6. React Native基础&入门教程:初步使用Flexbox布局

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...

  7. CSS box-flex属性,然后弹性盒子模型简介

    今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

  8. css基础--深入理解弹性盒flex布局

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...

  9. 深入理解 flex 布局以及计算_Flexbox, Layout

    起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文 ...

随机推荐

  1. 爬虫--Scrapy框架的初步使用

    1.scrapy在windows环境下安装 - 环境的安装: a. pip3 install wheel b. 下载twisted: http://www.lfd.uci.edu/~gohlke/py ...

  2. 国产开源优秀新一代MPP数据库StarRocks入门之旅-数仓新利器(上)

    概述 背景 Apache Doris官方地址 https://doris.apache.org/ Apache Doris GitHub源码地址 https://github.com/apache/i ...

  3. windows 文件hash校验,字符串加密,base64转换工具

    对下载的文件使用hash校验验证文件完整性 1 import hashlib 2 def md5(): 3 md5_value = hashlib.md5() 4 with open('C:\Inte ...

  4. 693. Binary Number with Alternating Bits - LeetCode

    Question 693. Binary Number with Alternating Bits Solution 思路:输入一个整数,它的二进制01交替出现,遍历其二进制字符串,下一个与上一个不等 ...

  5. linux篇-linux面试题汇总

    Linux经典面试题,看看你会几题? 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统 ...

  6. 基于SqlSugar的开发框架循序渐进介绍(5)-- 在服务层使用接口注入方式实现IOC控制反转

    在前面随笔,我们介绍过这个基于SqlSugar的开发框架,我们区分Interface.Modal.Service三个目录来放置不同的内容,其中Modal是SqlSugar的映射实体,Interface ...

  7. C++从静态类型到单例模式

    目录 1. 概述 2. 详论 2.1. 静态类型 2.1.1. 静态方法成员 2.1.2. 静态数据成员 2.2. 单例模式 2.2.1. 实现 2.2.2. 问题 3. 参考 1. 概述 很多的知识 ...

  8. 【原创】项目四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 ...

  9. pandas:多层索引

    多层索引是指在行或者列轴上有两个及以上级别的索引,一般表示一个数据的几个分项. 1.创建多层索引 1.1通过分组产生多层索引 1.2由序列创建 1.3由元组创建 1.4可迭代对象的笛卡尔积 1.5将D ...

  10. MySQL - 并发事务出现的问题

    1. 脏读 含义:在事务过程中,读到了其它事务为提交的数据. 解决方法:将数据库事务提升到读已提交或以上的隔离级别. 2. 不可重复读 含义:一次事务中,两次读操作中,读出来的数据内容不一致. 解决方 ...