CSS3 - 使用弹性盒子(Flex Box)实现完美居中、栅格系统及响应式布局
CSS3弹性盒子介绍
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
<!-- 弹性容器 -->
<div class="flex-container"> <!-- 弹性子元素 --><div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div>
</div>
弹性容器属性
1、设置容器为弹性盒子布局
display: flex;
2、设置弹性盒子中子元素的排列方式
flex-direction: row | column;
3、设置弹性子元素超出父容器时是否换行
flex-warp: nowrap | wrap;
4、flex-direction 和 flex-wrap的简写
flex-flow: flex-direction flex-wrap;
5、设置弹性子元素在主轴(横轴)方向上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
6、设置弹性子元素在侧轴(纵轴)方向上的对齐方式
align-items: stretch | center | flex-start | flex-end | baseline;
7、修改 flex-wrap 属性的行为,类似align-items, 但不是设置子元素对齐,而是设置行对齐
align-content: stretch | center | flex-start | flex-end | space-between | space-around;
弹性子元素属性
1、设置弹性子元素如何分配空间
flex: flex-grow flex-shrink flex-basis | auto;
2、设置弹性子元素的扩展比率
flex-grow: number;
3、设置弹性子元素的收缩比率
flex-shrink: number;
4、设置弹性子元素的伸缩基准值
flex-basis: px | percent | auto;
5、设置弹性子元素的排列顺序,值小的排在前面,可以为负值
order: number;
6、在弹性子元素上使用。覆盖容器的 align-items 属性
align-self: auto | stretch | center | flex-start | flex-end | baseline;
实现完美居中
在弹性子元素上设置margin: auto
,可以使得该弹性子元素在两个轴方向上完全居中。
<div class="flex-container"><div class="flex-item"></div>
</div><style>
.flex-container {display:flex;width:500px;height:500px;background:lightgray;}
.flex-item {margin:auto;width:200px;height:200px;background:darkred;}
</style>
实现效果:
实现栅格系统
类似Bootstrap的栅格系统,实现一个宽度比为1:2:1的三列布局。
<div class="flex-container"><div class="flex-item flex-item-l"></div><div class="flex-item flex-item-c"></div><div class="flex-item flex-item-r"></div>
</div><style>
.flex-container {display:flex;width:100%;height:300px;background:lightgray;}
.flex-item {margin:10px;background:goldenrod;}
.flex-item-l,
.flex-item-r {flex:1;}
.flex-item-c {flex:2;}
</style>
实现效果:
实现响应式布局
综合使用弹性盒子(Flex Box)和媒体查询(Media Query),可实现强大的响应式布局。
<div class="flex-container"><header class="header">头部</header><aside class="aside aside1">左侧栏</aside><article class="main">主体内容</article><aside class="aside aside2">右侧栏</aside><footer class="footer">底部</footer>
</div><style>
.flex-container {display: flex; flex-flow: row wrap;font-weight: bold;text-align: center;
}
.flex-container > * {padding: 10px;flex: 1 100%;
}
.header {background: coral;}
.aside1 {background: moccasin;}
.main {background: cornflowerblue;}
.aside2 {background: violet;}
.footer {background: lightgreen;}@media all and (min-width: 800px) {.aside { flex: 1 auto;}.aside1 { order: 1; } .main { flex: 3 auto; order: 2; }.aside2 { order: 3; }.footer { order: 4; }
}
</style>
移动端效果:
PC端效果:
后记
虽然当前各主流浏览器对CSS3的支持已日趋完善,但在实际项目中为确保各版本浏览器的兼容性,可在CSS属性前加相应的前缀:
- Chrome & Safari : -webkit-
- Firefox : -moz-
- IE : -ms-
CSS3 - 使用弹性盒子(Flex Box)实现完美居中、栅格系统及响应式布局相关推荐
- CSS3 弹性盒子(Flex Box)
目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...
- html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
- 弹性盒子(Flex Box)详解
1 . 弹性盒子的特点 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当 ...
- CSS3的弹性盒子flex详解(2)
上篇讲了弹性盒子中盒子的一些属性,这篇讲子项的属性 目录 1.order 2.aligh-self 3.flex-grow 4.flex-basis 5.flex-shrink 1.order 设置或 ...
- CSS3的弹性盒子flex详解(1)
弹性盒子的属性分为盒子的属性和子项的属性,先介绍盒子的属性吧,子项的属性下一篇讲 目录 1.dislay 2.flex-direction 3.flex-wrap 4.align-items 5. j ...
- CSS3弹性盒子Flex
CSS3弹性盒子Flex 基础知识和术语 原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 父级(flex容器)的属性 #显示 ...
- css 弹性盒子 flex布局
目录 css弹性盒子flex 布局 什么是flex 常见父项属性 概念与案例 主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
- 简述弹性盒子flex布局及rem布局
简述弹性盒子flex布局及rem布局 flex布局方式 采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴 水平主轴 主轴的开始位置(与边框的交叉点)叫做m ...
- 响应式布局:CSS3弹性盒flex布局模型
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و 页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display.position.float来 ...
最新文章
- 官宣!CSDN 重磅发布「AI开源贡献奖Top5」「AI新锐公司奖Top10」「AI优秀案例奖Top30」三大榜单...
- 北京站售票人员倒票视频
- 【DBMS 数据库管理系统】数据仓库 ( 数据仓库简介 | 操作型数据与分析性数据对比 | 数据仓库特征 | 特征一 : 面向主题组织数据 | 面向应用 | )
- 82. Leetcode 23. 合并K个升序链表 (排序)
- 【深度学习】CV语义分割实践指南!
- 批量删除redis键
- Windows访问Linux的Tomcat,显示无法连接
- Gradle DSL method not found: ‘compile()’
- cad图形如何导入到奥维地图_【详细教程】奥维地图上查看项目的线路图或平面图...
- perl模块net mysql_Perl模块实例化DBI Forks“Mysql服务器已经消失”
- 嵌入式系统是云服务器,一步步教你使用云端服务器yeelink远程监控
- kafka项目启动_使用Kafka Connect 同步Kafka数据到日志服务
- 怎么更改坐标轴标题access_excel图表如何修改x坐标轴数值,excel怎么设置横坐标标题...
- 直线分割平面的公式_折线(含直线)分割平面(图文)解析
- 淘宝新手开店可掌握的爆款核心思路
- shadow:人工智能设计,一门自己生长的课
- 11、Altiris cms 7.0 系统监控
- 计算机软件也有“五大部分”
- Hbase集群搭建超详细教程
- ULN2803驱动模块的使用