flex 速查手册

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>

上面三个属性的简写

 

发布了6 篇原创文章 · 获赞 0 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/manbudezhu/article/details/102555154