热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

是否有与“flex-grow”属性(或“flex”)相对的跨轴副本,该属性仅影响主轴?

如何解决《是否有与“flex-grow”属性(或“flex”)相对的跨轴副本,该属性仅影响主轴?》经验,为你挑选了1个好方法。

在Flexbox中,有“主轴”和“横轴”的概念。通常,在浏览器中,“主轴”是水平的,大概是因为台式机和笔记本电脑的屏幕通常是横向的;而在React Native中,“主轴”通常是垂直的,因为它主要用于电话,而电话通常是纵向。这些中的任何一个都称为“主轴”,另一个则称为“横轴”。

似乎在Flexbox中,许多影响主轴的属性也有一个对应的名称,其名称会影响横轴。

有一个叫做的属性flex-grow,另一个叫做的属性flex可以同时完成flex-grow和其他一些工作。

我不清楚的是这是否flex-grow是具有对应项的属性之一,还是一个例外。这同样适用于该flex财产。

原因之一,我想问的是,我经常读,试图让你的布局时的权利,你可以在线阅读,你可能需要设置flex1你的元素及其所有计数器/父元素。但是,在布局中哪些位置需要实现相同的目标,但在横向方向又如何呢?



1> LGSon..:

flex-grow(和速记flex)属性总是影响主轴线,具有没有对应,并设置如何水平分布的自由空间为柔性行方向和垂直方向上为柔性列方向

相比之下,例如,该justify-content属性影响主轴,而该属性影响主轴,则align-items影响交叉轴,两者均设置弹性项目的对齐方式。

但是,这里令人困惑的是,基于流动方向,它们会水平或垂直地影响柔韧性项目。


请注意,主轴横轴与屏幕是宽还是高无关。

它与流向有关,因此对于默认的flex行方向主轴是水平的,交叉轴是垂直,对于flex列方向主轴是垂直的,交叉轴是水平。

一篇非常好的文章是《 Flexbox的完整指南》,其中对此进行了更全面的解释。


推荐阅读
  • CSS定位方式有哪些CSS有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在(X)HTML中的位置决定。 ... [详细]
  • iOS Auto Layout Demystify
    BookDescripterAutoLayouttransformsthewayyoucreateiOSuserinterfaces.Asflexibleasitispowerfu ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • CentOS 7部署KVM虚拟化环境之一架构介绍
    本文介绍了CentOS 7部署KVM虚拟化环境的架构,详细解释了虚拟化技术的概念和原理,包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • 运算放大器使用规则及注意事项
    本文介绍了运算放大器的使用规则和注意事项,包括输入电压的限制、输出直接并接电容的安全性等。通过了解这些规则和注意事项,可以更好地使用运算放大器,避免出现意外情况。 ... [详细]
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • 本文介绍了一个React Native新手在尝试将数据发布到服务器时遇到的问题,以及他的React Native代码和服务器端代码。他使用fetch方法将数据发送到服务器,但无法在服务器端读取/获取发布的数据。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 恶意软件分析的最佳编程语言及其应用
    本文介绍了学习恶意软件分析和逆向工程领域时最适合的编程语言,并重点讨论了Python的优点。Python是一种解释型、多用途的语言,具有可读性高、可快速开发、易于学习的特点。作者分享了在本地恶意软件分析中使用Python的经验,包括快速复制恶意软件组件以更好地理解其工作。此外,作者还提到了Python的跨平台优势,使得在不同操作系统上运行代码变得更加方便。 ... [详细]
  • 随着前端技术的发展,越来越多的开发者开始使用react、vue等web框架,但很少有人深入理解这些框架的源码。然而,这些框架底层都是由原生的javascript构建而成。对于初学前端的人来说,可能会认为javascript很容易上手,但实际上只是因为它被高度封装了。与能够使用封装类的人相比,能够理解框架原理的人则处于另一个层面。本文将深入剖析jquery源码,探寻框架底层的原理,帮助读者更好地理解web框架的运行机制。 ... [详细]
  • 本文详细介绍了Android中的坐标系以及与View相关的方法。首先介绍了Android坐标系和视图坐标系的概念,并通过图示进行了解释。接着提到了View的大小可以超过手机屏幕,并且只有在手机屏幕内才能看到。最后,作者表示将在后续文章中继续探讨与View相关的内容。 ... [详细]
  • Question该提问来源于开源项目:react-native-device-info/react-native-device-info ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
author-avatar
小小小小小燕子_1996
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有