必须记住的知识点flex布局(面试题)
问题:面试官问,知道flex布局吗?那些属性作用在父元素上,那些属性作用在子元素上?首先看张图片一般display:flex写在父元素的属性上!下面是基本理解!在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置在容器中的每个单元块被称之为 flex item,每个项目占据的主轴空间为 (main size), 占据的交叉轴的空
(哔哩哔哩的5分钟视频嘎嘎好!我就是看那个的!
https://www.bilibili.com/video/BV1Lp4y1S7XM?spm_id_from=333.337.search-card.all.click)
问题:面试官问,知道flex布局吗?那些属性作用在父元素上,那些属性作用在子元素上?
首先看张图片
一般display:flex写在父元素的属性上!下面是基本理解!
在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置
在容器中的每个单元块被称之为 flex item,每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。
这里需要强调,不能先入为主认为宽度就是 main size,高度就是 cross size,这个还要取决于你主轴的方向,如果你垂直方向是主轴,那么项目的高度就是 main size。
哪些属性作用在父元素上?
justify-content:space-around space-between space-evently center flex-end
align-items:flex-star flex-end
flex-direction :row row-reverse column column-reverse
flex-wrap :nowrap(如果子孩子,的宽度超过父盒子,会进行总动的伸缩) wrap(不去管)
哪些属性作用在子元素上?
order (项目排列的顺序 越小越靠前)
align-self(单个属性的操作 flex-end center flex-star)
flex-grow(如果剩余有宽度是否进行扩张方法,默认是0,)
flex-shrink (空间不足的时候进行缩小默认是1 进行缩小)
更多推荐
所有评论(0)