专栏首页樯橹代码flexbox 伸缩布局

flexbox 伸缩布局

flexbox 研究

研究flexbox需要清楚一个概念,主轴和交叉轴的概念,而这两个轴是可以交换的

flexbox的样式属性主要作用于两个部分,一个是伸缩容器,一个是伸缩子项目

容器样式

display: flex | inline-flex

设置这个属性就代表当前这个元素变成了伸缩容器,一个是块状容器,一个是行内块状容器

flex-direction: row | row-reverse | column | column-reverse

flex-direction代表主轴布局方向

row: 左-> 右 ,row-reverse: 右 -> 左 ,column:上 -> 下 ,column-reverse:下 -> 上

flex-wrap: nowrap | wrap | wrap-reverse    

flex-wrap:代表的是超出布局的元素如何显示,分别是不换行,换行,换行之后从右向左排列

flex-flow: <‘flex-direction’> || <‘flex-wrap’>    

这个是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。其默认值为“row nowrap”。

justify-content: flex-start | flex-end | center | space-between | space-around    

主轴方向的对其方式

flex-start(默认值):伸缩项目向一行的起始位置靠齐。

flex-end:伸缩项目向一行的结束位置靠齐。

center:伸缩项目向一行的中间位置靠齐。

space-between:伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置,最后一个伸缩项目在一行中最终点位置。

space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。

align-items: flex-start | flex-end | center | baseline | stretch    

定义伸缩项目交叉轴在当前行的对齐方式

flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。

center:伸缩项目的外边距盒在该行的侧轴上居中放置。

baseline:伸缩项目根据他们的基线对齐。

stretch(默认值):伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

align-content: flex-start | flex-end | center | space-between | space-around | stretch    

定义伸缩项目在伸缩容器内部的对齐方式

同上

伸缩项目样式

order: <integer>    

子元素顺序

flex-grow: <number> (默认值为: 0)

根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

flex-shrink: <number> (默认值为: 1)    

根据需要用来定义伸缩项目收缩的能力。

flex-basis: <length> | auto (默认值为: auto)    

这个用来设置伸缩基准值,剩余的空间按比率进行伸缩。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]    

这是“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写

align-self: auto | flex-start | flex-end | center | baseline | stretch

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 公司大屏开发心得

    因为大屏不是对外开放的,所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。

    frontoldman
  • 被忽略的console.log

    除了console.log之外,还有更多方式调试JavaScript来输出值。 看起来很明显我们没有。

    frontoldman
  • nodejs使用aes-128-ecb加密如何在c#中解密

    却发现C#端怎么也解密不了,一直报错,改了一整天,后来终于发现,nodejs端加密用的key其实在使用之前已经使用md5加密了一次,而这个操作是默认的,暂时没发...

    frontoldman
  • Flex弹性布局

    Leophen
  • CSS Flexbox 可视化手册 [每日前端夜话(0x1E)]

    Flexbox是 Flexible Box Module(弹性盒模型)的缩写。 是一种可以轻松控制html元素之间的空间分布和对齐的布局模型。

    疯狂的技术宅
  • flexbox基本原理

    新版的flexbox规范分两部分:一部分是container,一部分是 items。 flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`fl...

    xiangzhihong
  • git协同开发

    当你从远程仓库克隆时,实际上Git自动把本地的master分支和远程的master分支对应起来了,并且,远程仓库的默认名称是origin。

    超蛋lhy
  • WPF 元素裁剪 Clip 属性

    在 WPF 的 UIElement 提供了 Clip 属性,这个属性默认是空,但是如果设置了这个属性就会对元素进行裁剪

    林德熙
  • 0669-6.2.0-集群中部分节点hadoop命令无法使用问题分析

    在做CDH版本降级(C62.0->C5.16.1)测试的过程中,集群中有两个节点上运行的角色(DataNode、NodeManager等)服务均正常。但在该节点...

    Fayson
  • ORM for Net主流框架汇总与效率测试

    框架已经被越来越多的人所关注与使用了,今天我们就来研究一下net方面的几个主流ORM框架,以及它们的效率测试(可能会有遗漏欢迎大家讨论)。 ORM框架:Obje...

    Java中文社群_老王

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动