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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值