Flex布局样式属性了解
Flex是Flexible box的缩写,意为弹性布局,用来为盒模型提供最大的灵活性.任何一个容器都可以指定为Flex布局.
通过 display:flex样式声明为flex布局的元素成为容器,而容器中的所有初级子代元素称为项目
传统布局优缺点:
兼容性好、布局繁琐、不能很好的兼顾移动端. 存在局限性
flex弹性布局优缺点:
操作方便,布局简单,能够很好的兼顾移动端.PC端浏览器兼容情况较差、IE支持版本较低,需要做兼容性处理.
建议:
做项目开发时,若是需要考虑各大浏览器兼容的PC端项目,建议使用传统布局模式,可以很好的兼容各大浏览器;
若是做移动端项目,或不考虑PC端兼容型问题的项目时,建议使用Flex弹性布局.注意:
当使用flex布局后,其初级后代默认都拥有宽度与高度的设置权限.
当我们声明使用flex布局以后,flex布局中的初级子代的float、clear、vertical-align属性将不起作用.flex布局原理:
通过给父级元素添加display:flex使其成为弹性盒模型,从而来控制初级子元素的排列方式以及所处位置.
Flex布局中父级元素(容器)的属性设置项
Flex布局中的父级元素(即我们通过display:flex声明的容器).其为我们提供了六个属性帮助我们控制其初级子元素.
flex-direction:
该属性用于设置子元素的排列方向(横向排列、纵向排列、颠倒方向排列等).子元素的排列根据主轴的方向来进行排列.
该属性是设置主轴方向的主要属性(如:设置子元素为纵向排列,则主轴为y轴.测轴为x轴)
默认情况下:主轴为X轴,方向向右,Y轴为测轴,方向向下.
属性值:row:默认值,表示从左到右排列,即x轴为主轴.y轴为侧轴
row-reverse:表示从右到左排列,即x轴为主轴,y轴为侧轴
column:表示从上到下排列,即y轴为主轴,x轴为侧轴
column-reverse:表示从下到上排列,即y轴为主轴,x轴为侧轴.
justify-content:
该属性用于设置主轴上初级子元素的排列对齐方式;使用该属性时,我们一定要确认好主轴是哪一个.
属性值:flex-start:默认值,表示从头开始(若主轴是X轴,则从最左边开始往右边排列.若主轴是Y轴,则从最上边开始往下边排列)
flex-end:表示从尾部开始(若主轴是X轴,则从最右边开始往左边排列,若主轴是Y轴,则从最下边开始往上排列).
center:在主轴居中对齐(若主轴是X轴,则水平居中.若主轴是Y轴,则垂直居中)
space_around:平均分配多余的空白空间(即:将多余的空白区域平均分配给每一个子元素,形式上(比如从x轴上来说)就好比给每一个子元素添加了相同的margin值一样.
space-between:第一个子元素与最后一个子元素紧靠着主轴,其余子元素平分剩余主轴空间.
flex-wrap:
默认情况下,flex布局的子元素是在一条轴线上显示的.我们可以通过该属性设置子元素是否自动换行显
示.
在默认情况下,若是不设置换行显示,则当所有子元素排列将要超出容器(父元素大小)时,默认会自动将所有子元素大小进行缩减,从而达到保持一条轴线显示的目的.
属性值:nowrap:默认值,表示不换行
wrap:表示换行显示
align-content(该属性只适用于存在多行子元素时):
该属性用于设置侧轴上初级子元素的排列对齐方式,使用时我们一定要确认好侧轴是哪一个(是X轴还是Y轴)
该属性适用于多行子元素时(存在换行情况)在侧轴上的排列对齐方式
属性值(这里以Y轴为侧轴为例):flex-start:默认值,表示从侧轴最上边开始进行排列
flex-end:表示从侧轴最下边开始进行排列
center:表示在侧轴中间进行排列
space-around:表示平均分配侧轴上的空白区域(就好比为每个元素添加了相同值得mangin.);
space-between:第一行子元素于最后一行子元素紧靠侧轴方向,其余行子元素平分侧轴上得空白区域.
align-items(该属性只适用于单行子元素时-没有出现换行情况):
该属性用于设置侧轴上初级子元素的排列对齐方式,使用该属性时,我们一定要确认好侧轴是那一个(是X轴还是Y轴)
该属性主要用于设置只有一行子元素时在侧轴上的排列对齐方式
属性值:(这里默认Y轴为侧轴)flex-start:默认对齐方式,表示从上到下.(即以Y轴为参考点,在Y轴的最上方对齐)
flex-end:表示从下到上(即以Y轴为参考点,在Y轴的最下方对齐)
center:表示居中对齐(即以Y轴为参考点,在容器的y轴中间对齐)
stretch:表示拉伸(若是使用该属性值,则子元素不能设置高度.).会自动填满侧轴方向.
flex-flow:
复合属性,相当于同时设置flex-direction属性和flex-wrap属性.
#Flex布局中子元素的属性设置项
order
该属性用于设置某一个子元素的排列次序优先级
数值越小，排列次序越靠前，默认为0。例如:
{
order:-1
}
flex-grow:
该属性用于放大指定子元素所占的空间大小
默认为0，即如果存在剩余空间，也不放大。
例如:{
flex-grow:2
}
flex-shrink:
该属性用于缩小指定子元素所占的空间大小
默认为1，即如果空间不足，该项目(子元素)将缩小。
例如:{
flex-shrink:1
}
flex:
该属性为order、flex-grow、flex-shrink属性的复合属性
该属性定义指定子元素分配剩余空间,用flex属性来表示占多少份.
我们可以通过该属性同时设置order、flex-grow、flex-shrink属性
例如:{
flex:1; // 表示独占一份(其余为默认值)
}
align-self:
该属性用于设置指定子元素与其他子元素不一样的对齐排列方式,
控制指定子元素自身在侧轴上的排列方式
相当于重写父元素设置给自身的align-items属性值.
属性值:flex-start:默认对齐方式,表示从上到下.(即以Y轴为参考点,在Y轴的最上方对齐)
flex-end:表示从下到上(即以Y轴为参考点,在Y轴的最下方对齐)
center:表示居中对齐(即以Y轴为参考点,在容器的y轴中间对齐)
stretch:表示拉伸(若是使用该属性值,则子元素不能设置高度.).会自动填满侧轴方向.
注意:flex布局十分依赖于主轴与侧轴进行布局设置,所以,在设置子元素属性时,应先确定主轴与侧轴.
