问答详情
源自:14-1 弹性盒模型 - 弹性盒模型之flex属性

关于 flex 属性特点的整理,望指正。

根据文中例子以及多次测试得出以下结论,供学习者参考并且希望大佬指出我理解中的错误之处。

flex属性具备以下特点:

  1. 设置 display:flex 属性,可以让所有子级元素在同一行中显示。

  2. flex需要添加在父级元素上,改变子级元素的排列方式。

  3. flex属性默认为靠父级元素顶部并从左往右依次排列,并且子级元素和父级元素没有间隙。

  4. 一般情况下,子级元素的宽度会随着父级元素宽度的改变而改变,部分标签除外:如<img>标签,图片的最小宽度不会随着父级元素的宽度改变而改变。

  5. 一般情况下,多个子级元素若宽度不同,父级元素的宽度改变时,子级元素也会按各自宽度的比例去改变,部分标签除外,如<img>标签,图片的最小宽度不会随着父级元素宽度的改变而改变。

  6. 若子级元素高度大于父级元素的高度,那么子级元素就会超出父级元素的显示范围。

  7. 若父级元素没有定义高度,那么父级元素的高度会以高度最高的子级元素为准。

  8. 若有子级元素没有定义高度,那么没定义高度的子级元素就会默认与父级元素的高度相同。若此时父级元素没有定义高度,那就参考第7条。

  9. flex属性仅应用于该元素的直接后代,不会应用于多级后代元素。

  10. 使用flex属性后,其内包含的直接后代元素,哪怕是行内元素,也会具有块状元素的特点,支持设置高度和宽度以及上下左右的边距。



提问者:麻辣烫不加辣 2021-01-18 15:10

个回答

  • 麻辣烫不加辣
    2021-01-18 15:13:43

    还有个问题想请教,我在测试时,为某个box 写上 display: inline ,希望把它改为内联元素,测试他是否还会与其他块状元素排列在同一行,结果这个定义并没有作用,这个box尽管定义为了inline属性,但是他依然是以块状元素的形势展现的,CSS中宽度和高度的定义依然有效。是因为在flex中这个display:inline 没用吗?还是其他原因?