栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何实现Flex布局?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何实现Flex布局?

参考回答:

文章链接:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool(语法篇)

简单的分为容器属性和元素属性容器的属性:

flex-direction:决定主轴的方向(即子item的排列方法)

.box {flex-direction: row | row-reverse | column | column-reverse;}

flex-wrap:决定换行规则

.box{flex-wrap: nowrap | wrap | wrap-reverse;}flex-flow:.box {flex-flow: <flex-direction> || <flex-wrap>;}

justify-content:对其方式,水平主轴对齐方式

align-items:对齐方式,竖直轴线方向

项目的属性(元素的属性):

order属性:定义项目的排列顺序,顺序越小,排列越靠前,默认为0

flex-grow属性:定义项目的放大比例,即使存在空间,也不会放大

flex-shrink属性:定义了项目的缩小比例,当空间不足的情况下会等比例的缩小,如果定义个item的flow-shrink为0,则为不缩小

flex-basis属性:定义了在分配多余的空间,项目占据的空间。

flex:是flex-grow和flex-shrink、flex-basis的简写,默认值为0 1 auto。

align-self:允许单个项目与其他项目不一样的对齐方式,可以覆盖align-items,默认属性为auto,表示继承父元素的align-items

比如说,用flex实现圣杯布局

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/366152.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号