根据文中例子以及多次测试得出以下结论,供学习者参考并且希望大佬指出我理解中的错误之处。
flex属性具备以下特点:
设置 display:flex 属性,可以让所有子级元素在同一行中显示。
flex需要添加在父级元素上,改变子级元素的排列方式。
flex属性默认为靠父级元素顶部并从左往右依次排列,并且子级元素和父级元素没有间隙。
一般情况下,子级元素的宽度会随着父级元素宽度的改变而改变,部分标签除外:如<img>标签,图片的最小宽度不会随着父级元素的宽度改变而改变。
一般情况下,多个子级元素若宽度不同,父级元素的宽度改变时,子级元素也会按各自宽度的比例去改变,部分标签除外,如<img>标签,图片的最小宽度不会随着父级元素宽度的改变而改变。
若子级元素高度大于父级元素的高度,那么子级元素就会超出父级元素的显示范围。
若父级元素没有定义高度,那么父级元素的高度会以高度最高的子级元素为准。
若有子级元素没有定义高度,那么没定义高度的子级元素就会默认与父级元素的高度相同。若此时父级元素没有定义高度,那就参考第7条。
flex属性仅应用于该元素的直接后代,不会应用于多级后代元素。
使用flex属性后,其内包含的直接后代元素,哪怕是行内元素,也会具有块状元素的特点,支持设置高度和宽度以及上下左右的边距。
还有个问题想请教,我在测试时,为某个box 写上 display: inline ,希望把它改为内联元素,测试他是否还会与其他块状元素排列在同一行,结果这个定义并没有作用,这个box尽管定义为了inline属性,但是他依然是以块状元素的形势展现的,CSS中宽度和高度的定义依然有效。是因为在flex中这个display:inline 没用吗?还是其他原因?