弹性布局:把父元素设置为弹性容器,可以控制子元素的位置和尺寸,弹性布局必须是父子嵌套关系才能使用,其实就是浏览器根据参数自动计算元素的位置和尺寸,弹性布局不会让元素脱离正常文档流
display:flex;这个属性是把元素设置成弹性盒子,给父元素设置
flex-direction:row/column;这个属性是设置子元素在主轴(x轴/横轴)或者侧轴(y轴/竖轴)对齐,row为主轴,column为侧轴。设置了弹性盒子,子元素默认在主轴对齐,给父元素设置
代码展示:
浏览器效果:
justify-content:center/flex-start/flex-end/space-around/space-between/space-evenly;这个属性是设置子元素在主轴的对齐方式,给父元素设置
center:子元素在主轴居中展示
flex-start:子元素靠左对齐
flex-end:子元素靠右对齐
space-aroud:子元素之间自动产生间距,每个间距不相等
space-between:子元素之间产生间距,开始和结束位置没有间距
space-evenly:子元素之间产生相等的间距
align-items:center/flex-start/flex-end;设置子元素在侧轴的对齐方式,给父元素设置。
弹性布局遇到所有子元素的宽度相加超出父元素的宽度,默认情况下,子元素宽度会进行收缩,不想子元素收缩可以设置超出部分换行:flex-wrap:wrap/no-wrap;wrap为换行,no-wrap为不换行,给父元素设置
align-content:flex-start/flex-end/space-around/space-between/space-evenly;这个属性一般配合换行使用,其属性值作用和justify-content差不多,只不过是相对于侧轴,给父元素设置
flex-start:子元素靠上对齐
flex-end:子元素靠下对齐
space-aroud:子元素之间自动产生间距,每个间距不相等
space-between:子元素之间产生间距,开始和结束位置没有间距
space-evenly:子元素之间产生相等的间距
flex-shrink:0;设置收缩属性,为0不收缩,为其他值会进行收缩
older属性和align-self属性:通过给子元素设置align-self属性控制子元素在父元素的侧轴的位置,这个属性的属性值和上面align-content差不多一样,作用也差不多,通过older的属性值控制子元素渲染的先后顺序,older的属性值越大越先渲染出来,就是谁的值越大那它就在最上面,这两个都是给子元素设置,针对单个子元素的操作。
flex-grow:1;子元素按1:1的比例来分割父元素,就是每个子元素占的位置一样,给子元素设置的,也可以给每个子元素设置不一样的属性值让他们的占比不一样,没设置的元素会默认按自己的大小占比
flex-basis:10px;这个属性是设置子元素的尺寸,但是只能设置宽和高其中一个,主要看你flex-direction属性设置的是主轴对齐还是侧轴对齐,主轴就是设置宽,侧轴就是设置高,这个属性是给子元素设置的