flex布局简析
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
是单独的自己给自己样式。
暂且有这么多。以后在有问题在补充