前端布局:Flex弹性布局使用及说明

CSS中的flexbox生来就是为了布局而生的,使用它能使许多布局布局变得简单。典型的三栏式布局、垂直水平居中布局,使用的是传统的浮动法、定位法,代码相对复杂难懂,如果使用flexbox就会变得很简单。

Flex布局的主要思想是使父元素能够调节子元素的高度、宽度和排布的顺序,从而能够最好地适应可用布局空间(能够适应不同的设备和不同大小的屏幕)。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间,也可以收缩子元素使之不溢出。

前端知识

前端布局:Flex弹性布局使用及说明插图(1)

      Flex的属性总结表

前端知识

Flex布局如何使用?
任何一个容器都可以指定为Flex布局
.box{
display: flex;
}
行内元素也可以使用Flex布局
.box{
display: inline-flex;
}

提供全面的搜索引擎优化学习交流,专注网站优化和搜索引擎营销推广服务。用专业的SEO技术为企业网站提升关键词排名,让你的网站不仅满足用户体验还要适合搜索引擎优化规则。
易速网站优化公司 » 前端布局:Flex弹性布局使用及说明
享更多特权,立即登录下载海量资源
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡