flex布局简析

最近开始对flex布局进行一个重新的认识。

首先。

flex布局适用于所有元素

但是注意一点的就是，一旦父级元素设定flex布局的时候，子元素的传统布局属性, float,clear,vertical-align属性都会失效的。

一.父容器的属性

1.flex-direction

是决定元素主轴的方向

row:默认值，由左到右正序。

row-reverse:有右到左的逆序

column:有上倒下的正序

column-reserve:由下到上的逆序

2.flex-wrap

是否换行

nowrap:默认值，不换行(当元素数量和宽度超出父级，就会缩短自身宽度)

wrap:换行(保留当前宽度，换行。且行高等于父级元素的一半)

wrap-reverse:由下向上换行，同wrap一样，但如果父级宽度过低，那行高就为1

3.justify-content

定义元素在父级X轴对齐方式

flex-start:默认值，元素左对齐。

flex-end:元素右对齐

center:元素中间对齐

space-between:元素等分两边对齐

space-around:元素等分，两边有间隔。且间隔是元素之间间隔的一半

4.align-items

定义元素在父级y轴对齐的方式

flex-start:元素上对齐

flex-end:元素下对其

center:元素居中显示

stretch:默认值，如果没设置高度，那么高度就为100%；

5.align-centent

当超过两行的时候，上下对齐方式

flex-start:元素上对其

fled-end:元素下对其

center:元素剧中对齐

stretch:默认值，占满整个交叉轴

space-between:元素等分上下对齐

space-around:元素等分，上下又间隔，且间隔是元素之间间隔的一半

二、子元素的属性

1.order

order默认值为0，属性定义元素的排列顺序，最小越前

2.flex-grow

flex-grow默认值为0，属性定义元素宽高增大占比，值越大占比越大

3.flex-shrink

flex-shrink默认值为1，属性定义元素宽高缩小占比，值越大缩小越大，负值无效

4.flex-basis

flex-basis默认值为auto，属性意义和width相同，但是优先级高于width

5.align-self

align-self默认值是flex-start,属性的定义和align-items相同，但是会覆盖其样式单独定义

三、疑难点

1.align-items和align-content之间文字的区别？

很多人对这两个属性又一些不解，同样都是操纵子元素Y轴但是，align-content只能操作多

行，单行是无效的。而且align-content会重置flex项目元素对自身等分的行高问题。

话不多说一个图能代表一切：

这样是不是就了解了

2.align-self和align-items之间的区别

相对于第一个问题，这个就更简单了，align-items是给子元素规定一个统一样式，而align-self

是单独的自己给自己样式。

暂且有这么多。以后在有问题在补充