flex 速查手册

布满荆棘的人生 2023-06-07 12:04 92阅读 0赞

Flex标准写法:

概述:

总的来说就是12个属性;

关于容器的6个,5个单一属性,分别定义了元素排列的方向, 行, 水平排列, 垂直排列, 空白分布, 和一个简写属性, 方向,行

关于容器内元素的6个, 5个单一属性, 分别定义元素的顺序, 伸展, 收缩, 初始尺寸, 对齐, 和一个简写属性 描述元素尺寸




























































container : display: flex | inline-flex;

说明

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

元素在容器内的排列方向

flex-wrap: nowrap | wrap | wrap-reverse

元素一行或多行显示

flex-flow: <flex-direction> <flex-wrap>    default: <row nowrap>

上面两个属性的简写

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

水平方向上, 元素在容器内的分布

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

垂直方向上,  元素在容器内的分布

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

在容器内, 额外的空白部分的分布

Container items :

  

 order: <number> 0

元素在容器内的排列顺序

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

覆盖align-items的值, 定义自身在垂直方向上的分布

flex-grow: <number> 0

元素在容器内所占空间的伸展

flex-shrink: <number> 1

元素在容器内所占空间的收缩

flex-basis: <width> auto

初始化时, 元素在容器内的尺寸

flex: <flex-grow> <flex-shrink> <flex-basis>    <0  1  auto>

上面三个属性的简写
  • *

发表评论

表情：
评论列表 （有 0 条评论，92人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Nginx速查手册

    > Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。 ![在这里插入图片描述][w

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 73 阅读

    相关 flex 速查手册

    Flex标准写法:   概述: 总的来说就是12个属性; 关于容器的6个,5个单一属性,分别定义了元素排列的方向, 行, 水平排列, 垂直排列, 空白分布, 和一个简写

    布满荆棘的人生布满荆棘的人生/ 0 赞/ 93 阅读

    相关 Git速查手册

    `1024`了，程序猿们节日快乐，简单整理个供小白使用的git速查手册，之后有时间再完善，其实一会一些简单的操作平时工作就够用了（只要你别闹！一般不会有什么大问题），哈哈哈

    青旅半醒青旅半醒/ 0 赞/ 58 阅读

    相关 DL概念速查手册

    > 编者按：入门深度学习的方法有很多，其中最便捷的是在线课程。但是，从做出这项选择起，新手要面临的就不仅是全新的知识体系，还有无数的陌生术语。在开始阅读前，请自问自答：什么是A

    Bertha 。Bertha 。/ 0 赞/ 282 阅读

    相关 IDEA 快捷键速查手册

    IntelliJ IDEA 2021 Win 和 Mac 快捷键大全，IDEA 基本所有功能都可以通过快捷键来完成。 如果你掌握了所有IDEA的快捷键使用，那么你完全

    墨蓝墨蓝/ 0 赞/ 432 阅读