结合自己屡屡记忆又常常忘记的体质,把Flex容易遗忘的部分记录在文档中吧。
属性融合写法,导致自己经常不认识的属性
1. flex-flow
是flex容器盒子的flex-direction
和flex-wrap
的融合写法。
2. flex:1是flex-grow、flex-shrink 、flex-basis
的融合写法。
flex-shrink 、flex-basis
两个可以省略,故flex:1
代表的是flex-grow.
最容易混淆的属性
1. justify-content
vs align-content
. 这两者共同的特点是它们控制的容器行,而不同的点在于一个控制横向的主轴对齐方式,一个控制的纵轴对齐方式,容器行是以组为单位的。如果仅有flex布局的盒子仅有一行(flex: wrap或者wrap-reverse的前提下才有效果),那么就没有纵轴对齐的意义。这就是我们通常不用align-content属性的原因,我们的实际业务中,通常只有一个容器行。
2. align-content
vs align-items
。align-content
是关于多行纵轴的对齐, align-items
是关于容器行里面的元素如何对齐主轴的属性。
理解的模棱两可的属性
1. flex布局后,文档流发生了什么变化?
flex布局后,不遵循一般的文档流,float浮动相关的属性失效,也就是有了flex没有浮动,但是定位仍然有效
2. flex:1代表什么?
flex:1是flex-grow、flex-shrink 、flex-basis的融合写法。
flex-shrink 、flex-basis两个可以省略,故flex:1代表的是flex-grow.
flex-grow默认是0,如果有值,且几个子项的值之合大于1,那么则按照它们的所占比例分割这一行的剩余空间。
比如有三个盒子分别定义了flex:1、flex:2、flex:1;那么代表中间的盒子占剩余空间的50%,其他两个占25%。
3. align-items代表什么?
代表着子项目在容器行里面的对齐方式,但是仍然是主轴的对齐,start,end,center等。items是复数代表了控制的是多个元素。与align-self比较的话,self仅仅控制自身,故align-items是管理容器行里面多个元素的,是父亲盒子的属性,self是控制子元素的属性。
4 .容器行的纵轴可以调整吗?
align-items调整的是容器行里面元素的主轴对齐方式,那纵轴呢?因为容器行仅代表一行的的概念,没有多行,故而纵轴方向就不需要考虑了。
被忽略的默认值,导致理解属性有偏差
1. align-content
属性的值stretch是默认的。这也就是为什么当我们定义一个flex容器,给了高度之后,里面的元素虽然没有给高度,但是全部占满了。