位置: IT常识 - 正文

CSS之Flex详解(css的flex:1)

编辑:rootadmin
flex是什么 根据规范中的描述可知道,Flexbox 模块提供了一个有效的布局方式,即使不知道视窗大小或者未知元素情况之下都可以智能的,灵活的调整和分配元素和空间两者之关的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。 flex分为两个部分,即容器(Container)和项目(i ... 目录flex是什么容器的属性item 的属性一些疑惑和解答flex是什么

推荐整理分享CSS之Flex详解(css的flex:1),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css中flex属性,css中的flex属性,css中flex:1,css里flex,css flex-flow,css flex1,css flex1,css中flex用法,内容如对您有帮助,希望把文章链接给更多的朋友!

根据规范中的描述可知道,Flexbox 模块提供了一个有效的布局方式,即使不知道视窗大小或者未知元素情况之下都可以智能的,灵活的调整和分配元素和空间两者之关的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。

flex分为两个部分,即容器(Container)和项目(item)。一旦将一个元素设置为 flex container,那么其子元素默认全部变为flex item。然后我们就可以通过在 container 设置一些属性来控制其 item 的布局。当然,item 自身也有一些 flex 属性,是只针对自己的属性。

CSS之Flex详解(css的flex:1)

要将一个元素设置为容器,只要在其 css 里添加 display:flex 或者 display:flex-inline 即可

在介绍 flex 的属性前,还有一些基本概念需要介绍,这里就借用网上的一幅图来说明

如图,其实已经很清晰明了了,容器内有两条轴,分别叫主轴(main axis)和交叉轴(cross axis),一般情况下 item 沿主轴方向排列,flex默认主轴为横向,交叉轴为纵向。还有 main start、main end、cross start、cross end 这四个分别表示主轴和交叉轴的起始位置和结束位置。

容器的属性

容器有六个属性,flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

flex-directionflex-direction 有四个值:row、column、row-reverse、column-reverse。这个属性用于设置主轴方向。row 为默认值,表示主轴为横轴,方向从左到右;column 表示主轴为纵轴,方向从上到下;后两个分别表示从右到左和从下到上的主轴。flex-wrapflex-wrap 有三个值:nowrap、wrap、wrap-reverse。这个属性设置如何换行。nowrap(默认)表示不换行,此时若主轴方向item总长度超过容器长度,则压缩 item 主轴方向长度。wrap 表示换行,当 item 总长度超过容器长度时就换行。wrap-reverse 表示反向换行,换行后最靠近 cross end 的为第一行、然后是第二行......flex-flowflex-flow 为前面两个的简写版本,即可以同时在此属性里设置前面两个属性的值,如:flex-flow: nowrap row;justify-contentjustify-content 有五个值:flex-start、flex-end、center、space-between、space-around。此属性用于调整主轴方向上 item 的对齐方式。flex-start 和 flex-end 分别表示向 main start 和 main end 对齐;center 为主轴方向上的居中对齐;space-between 表示同时向 main start 和 main end 对齐,即两端对齐,并且两个 item 之间主轴方向上的间距相等;space-around 表示每个项目两侧之间的距离相等align-itemsalign-items 有五个值:flex-start、flex-end、center、stretch、baseline。此属性用于调整交叉轴方向上项目的对齐方式。前面三个值和 justify-content 对应的值效果是一样的,只是方向换成了交叉轴。stretch 为默认值,当 item 交叉轴方向的长度没有设置或为auto时就会在交叉轴方向填满容器。baseline 则表示文字对齐,即以 item 中的第一行文字为基准对齐align-contentalign-content 有六个值:flex-start、flex-end、center、space-around、space-between、stretch。此属性定义了多根轴线的对齐方式,当只有一根轴线时此属性无效。此属性主要针对交叉轴方向,其值在上面都有提到,这里就不赘述了item 的属性

item 有六个属性:order、flex-grow、flex-shrink、flex-basis、flex、align-self

order。order 设置同一容器里沿主轴方向的排列顺序。可以利用此属性做交换的动画flex-grow。此属性设置该 item 在主轴方向有剩余空间时的放大比例,默认为0,即不放大。注意:这里的放大计算原理是先计算主轴上的剩余空间 rest_space,然后计算这条轴上所有 item 的 flex-grow 之和 grow_sum,最后给每个项目 item[i] 的主轴长度增加 rest_space * ( grow[i] / grow_sum )。即先计算出该 item 放大比例占所有 item 放大比例的百分比,然后该 item 增加 该百分比乘以主轴剩余长度。需要注意的是,当主轴方向没有剩余空间时,该属性无效flex-shrink。此属性和 flex-grow 正好相反,此属性设置该 item 在主轴方向没有剩余空间时的缩小比例,默认值为1,即空间不足时缩小。如果设置为0,则空间不足时会超出容器。我原本以为计算原理和 flex-grow基本相同,后来发现有一点不对。经过网上查询资料发现,flex- shrink 的计算公式略有区别。flex-shrink 首先要计算权重 TW = E(basis[i] * shrink[i])。也就是所有 item 的 basis * shrink 之和。然后每个 item 的实际长度为 basis[i] - [ (basis[i] * shrink[i] ) / TW ] * need_space。其中,basis 为项目设置长度(见下面的4),shrink 为缩放值,need_space 为需要所有 item 减少的总长度。需要注意的是:flex-shrink 为0的 item 是不会缩放的,通常这会导致 item 超出容器。flex-basis。此属性指示在分配多余空间前 item 占的长度,默认情况下为 auto,即设置的width。需要注意的是,如果没有多余空间的话,会按照上面第3条的规则缩放;是否有多余空间是根据主轴上所有 item 的flex-basis 之和来计算的,不是按照 width 来计算的!flex。此属性为 flex-grow、flex-shrink、flex-basis 三个属性的简写,有两个快捷值:auto( 1 1 auto) 和 none( 0 0 auto )。align-self。此属性可取六个值:flex-start、flex-end、center、baseline、stretch、auto。此属性设置单独的排列行为。此属性的值的含义前面容器属性部分都有提到,此处不赘述。一些疑惑和解答

在学习flex的时候,不自觉产生了一些使用方面的疑惑,下面就是我的一些疑惑和结果

justify-content 是针对主轴方向的排列,一开始想当然认为是多个 item 的情况,后面突然想起,如果是一个 item 的话,其排序规则又是怎样的呢?首先 flex-start、flex-end 和 center 还比较好理解,只有一个项目的时候会贴着 main start、main end 或者在 main start 和 main end 的中间。那么其值为 space-between 和 space-around的时候呢。前者表示两端对齐,后者表示等间距对齐,在只有一个项目的情况下会怎么出现什么结果呢?结果如下 左边表示 space-around 的结果,右边表示 space-between 的结果。可以看出,由于 space-around 要求项目两侧的距离相等,因此只有一个项目时左右距离各占一半,和center的效果是一致的;而 space-between在只有一个项目不能同时对齐左右端的情况下,选择了左对齐。结论:当只有一个项目时,space-around 的效果等同于 center,space-between 的效果等同于 flex-startalign-items值为 stretch 时,假如 item 在交叉轴方向的长度没有设置,并且在交叉轴方向不止一个 item (即在主轴方向有换行),这时会出现什么结果呢?这个问题的结果非常有趣,我原以为只要交叉轴方向上只有一个 item 的会直接填满整个容器,而有两个 item 的就平分容器。然后结果却如下图原因大概是因为 stretch 的拉伸针对的是整个轴,而上图是双轴线,实际上 stretch 的效果是正确的结论:只要交叉轴方向有大于2个 item,即使交叉轴方向只有一个 item,这个 item 依然不会充满容器,而是和主轴方向上的 item 长度一致align-items值为 baseline 时,若 item 没有文字会出现什么结果?这个问题的结果也很有趣,直接上结果 可以看出,没有文字的 item 可以认为是文字在最底部的 item结论:没有文字的 item 可以认为是文字在最底部的 itemalign-content 说明为单轴线时无效,那么什么时候为单轴线,什么时候为多轴线?经过我的实验,所谓的单轴线应该就是说没有换行的情况下,只有一行有 item ,此时 align-content 无效。那么由此反推,交叉轴方向上 item 的最大个数即主轴数,主轴方向上 item 的最大个数即交叉轴数。如下图,这就是双轴线justify-content、align-items 和 align-content 似乎差不多?首先就他们可以取的值而言, align-content 似乎是 align-items 和 justify-content 的大杂烩,后面两个属性可以取得值 align-content 都可以取,更为巧合的是,取 align-items 的 align 和 justify-content 的 content 就组成了 align-content,这倒是挺有趣的。但是三者之间还是区别比较明显的。justify-content 就不说了,它的区别最明显,它是针对主轴的,而其他两个是针对交叉轴的。那么同样针对交叉轴的 align-content 和 align-items 有什么区别呢?首先看看定义,align-content 相较于 align-items 有一个明显的不同,那就是它不支持单轴线的操作。下图是单轴线情况下 align-items 和 align-content 的区别 可以看出,单轴线情况下 align-content 根本没起作用,而此时 align-items 就起到了非常关键的作用。接下来再看看多轴线情况下会发生什么

于是两者之间的区别已经跃然纸上了。首先,align-content 单轴线无效,而 align-items 单轴线和多轴线都有效(但多线轴情况下其本质还是对单线轴的设置)。当两者同时使用且发生冲突时,align-content 的优先级别更高,也就是说,冲突时 align-content 的操作会覆盖掉 align-items 的操作结论:

justify-content 是针对主轴的,而 align-content 和 align-items 是针对交叉轴的align-content 不支持单轴线,align-items 本质就是对每条轴线的操作操作冲突时,align-items 的操作会被 align-content 覆盖掉
本文链接地址:https://www.jiuchutong.com/zhishi/311883.html 转载请保留说明!

上一篇:2022年最新wordpress日主题Ripro子主题-ziyuan-zhankr蓝色资源网主题V3.0.3子主题破解版(2022年最新办公用房标准)

下一篇:帝国cms6.6注册欢迎邮件发送的方法是什么(帝国cms登录)

  • 净利润和盈余公积的会计分录
  • 个税申报收入额怎么填
  • 应预缴的增值税
  • 住房公积金的会计处理
  • 丢失发票联和抵扣联
  • 进项税抵扣销项税
  • 出租固定资产取得的净收益计入什么科目
  • 因台风造成原材料毁损计入什么科目
  • 工会没有税号怎么开普票
  • 外贸企业出口退税流程图
  • 预交增值税扣税绑不了三方
  • 收到银行存款利息记账凭证怎么写
  • 报销差旅费涉及的会计科目
  • 网页游戏玩着卡
  • 成立非盈利组织的条件
  • 环评费入账的会计分录是什么啊
  • 公司名下汽车过户给个人
  • win7为什么还有人用
  • cn域名删除期
  • adb命令linux命令的区别
  • 已入账未抵扣的发票开红字发票
  • 国产操作系统两项全球第一
  • windows 10预览版
  • 购入固定资产后发生的员工培训费应计入固定资产的成本
  • 未实缴出资的股权转让后还要承担法律后果吗
  • 计提税金及附加怎么算
  • 一般纳税人销售自己使用过的汽车
  • 投资性房地产的主要构成内容为
  • php实现删除功能
  • php怎么取数组
  • 建筑行业现在还能斤不
  • 机器学习中的隐变量/潜变量和隐藏空间/潜在空间
  • 增值税报表填报说明
  • uniapp返回上一页不刷新
  • vue3.0用法
  • 微信小程序人民法院审核通过多久立案
  • chkconfig命令参数
  • 数据模型 excel
  • 技术咨询费属于
  • python中返回结果为true
  • 往来款项的含义
  • DB2专家王云谈商业智能BI
  • mysql 执行过程
  • 购买房屋缴纳的契税可以退税政策
  • 注销公司需要承担什么责任
  • 个人的车由公司来投保可以吗
  • 差旅费属于什么会计科目 会计分录
  • 一般纳税人怎么算税
  • 车保险费中的车费是什么
  • 什么情况下说免贵
  • 固定资产无票怎样入账
  • 处置存货损失应该放哪个科目
  • 样品定义是什么
  • 手工账月末结账步骤
  • 小规模开票免税额度是多少
  • 应收账款怎么记录
  • 快速清理朋友圈的方法
  • 用指定用户名访问网络
  • ubuntu下source、sh、bash、./执行脚本的区别详细介绍
  • linux ssh rsa
  • win7怎么禁止u盘自动运行
  • msng.exe病毒
  • win7桌面点不了怎么回事
  • win 10系统怎么提高网速
  • linux.rpm
  • 微信小程序使用webview
  • jquery取value
  • node-red 全局变量
  • 网页弹窗不见了
  • js数组排序方法sort
  • 税务局试用期
  • 医保预交金可以取出来吗
  • 安徽省地方税务局刘利庆
  • 运输类税点
  • 铜梁在重庆主城哪个方向
  • 地域税收收入增长原因
  • 华为领导班子成员名单
  • 成都交房需要交什么费用
  • 城市维护建设税法自2021年10月1日起施行
  • 全国青少年学法网(官网)
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设