您的位置: 首页 > 面试技巧

面试题:flex弹性布局

来源:华信智原  |  发布时间:2021-04-06  |  浏览量:790

答:1.设置盒子的display属性为flex,或者line-flex,其对应还有六个css属性,分别为:


1)flex-direction:设置子元素的排列方式(row,column,row-reverse,column-reverse)


2)flex-warp:设置子元素的是否换行(nowarp,warp,warp-reverse)


3)flex-flow:flex-direction和flex-warp的缩写,默认为row nowarp


4)justify-content:设置子元素的水平排列方式(flex-start,flex-end,center,span-around,span-between)


5)align-items:设置子元素的垂直方式(flex-start,flex-end,center,stretch,baseline)


6)align-content:设置多个轴线的排列方式(flex-start,flex-end,center,spand-around,spand-between,stretch)


2. 对应的子元素项目也拥有自身的六个css属性,分别为:


1)order:设置元素的排列权重 值越大越在后


2)flex-grow:设置元素的放大比例


3)flex-shrink:设置元素的缩小比例


4)flex-basis:设置多余空间项目主轴所占比例空间


5)flex:flex-grow和flex-shrink和flex-basis的缩写方式 默认为0 1 auto


6)align-self:设置子元素自己的垂直排列方式,默认为盒子的align-items的值


:warning::设置flex布局后,子元素的float,clear,vertical-align都无效


相关新闻

24小时报名热线

400-7777-699

报名热线:400-7777-699

微博

微信公众号

友情链接 :智原在线   美味学院   安徽新华电脑   安徽新华教育

华信智原(官网)|京ICP备09028087号-8|咨询热线:400-7777-699|地址:北京海淀区北三环中路44号院爱工场文化教育产业园|版权所有:北京华信智原教育技术有限公司
在线报名 学费详情 开班信息 职业护航 视频下载

小小华想和您聊一聊