• 欢迎大家分享资料!前往留言板评论即可!

关于flex布局的部分常用属性的个人理解

合宙 模组资料网 5个月前 (05-15) 73次浏览 已收录 0个评论 扫描二维码

学习的时候听到这么一句总结:flex布局的实质 就是通过父盒子设置display:flex来控制子盒子的排列方式。

常用的父项属性:

(以下均以横向排布为例)

1.justify-content——设置主轴上子元素排列方式

flex-start 从左到右(默认)
flex-end 从右到左
center 水平居中
space-around 每份占相同宽度,其内容居中
space-between 先两边贴边,再平分剩余空间

2.flex-wrap——设置子轴是否换行

nowrap 不换行(默认)
wrap 换行

3.align-items/align-content——设置侧轴上子元素对齐方式(单行/多行)

flex-start 靠上对齐
flex-end 靠下对齐
center 居中对其
其中,多行还存在:space-around ,space-between 与上方提到的用法相同

常用的子项属性:

1.align-self——设置侧轴上元素对齐方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性 。
默认值为auto ,表示继承父元素的 align-items 属性(flex-start、flex-end、center、stretch),如果 没有 父元素,则等同于 stretch。
以上解释来自:https://blog.csdn.net/qq_42837306/article/details/104194107

注:stretch:元素被拉伸以适应容器。

2.order——设置子项的排列顺序

值为数字 值越小,排列越靠前,默认为0

3.flex——子项目占的份数(如果子元素超出或不足父元素时的处理方式)

flex 是 flex-grow、flex-shrink、flex-basis的缩写,所以默认有三个值:flex:0 1 auto;

flex-grow:默认值是0,代表可分配的剩余空间,与元素自身宽度无关,之能是数字,数字大于1时,剩余空间按照数字比例全部分配,数字小于1时,按照数字分配剩余空间(如 0.2代表可分配剩余空间的2/10)

flex-shrink:默认值是1,代表溢出时要压缩的比例,这与自身宽度有关,值越大,压缩的越厉害。如果值为0,表示不压缩。

flex-basis:不能为数字,可以是px单位或者百分数。

该属性用来设置元素的宽度,其实,width也可以设置宽度。如果元素上同时设置了width和flex-basis,那么width 的值就会被flex-basis覆盖掉。 以上解释来自:https://blog.csdn.net/m0_37058714/article/details/80765562

以上仅代表我个人对flex学习后的理解与常用的属性总结,如有片面或不妥之处还望指出。


喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址