css中flex:1弹性布局例子
来源:互联网 发布:nba数据统计排名 编辑:程序博客网 时间:2024/05/22 09:28
<!DOCTYPE html><html><head><meta charset="utf-8"><style>#main { width: 220px; height: 300px; border: 1px solid black; display: -webkit-flex; /* Safari */ -webkit-align-items: center; /* Safari 7.0+ */ display: flex; align-items: center;}#main div { -webkit-flex: 1; /* Safari 6.1+ */ flex: 1;}</style></head><body><div id="main"> <div style="background-color:lightblue;">BLUE</div> <div style="background-color:lightgreen;">Green div with more content.</div> RED </div></body></html>
注意事项:
1.flex必须在弹性模块中有效,即display:flex
2.如上例RED没有参与flex分配,所以蓝色和绿色平均分配除RED后的剩余空间
0 0
- css中flex:1弹性布局例子
- css中flex:1弹性布局例子
- CSS中flex布局 弹性盒模型
- 浅谈CSS属性之布局--flex布局<弹性盒模型>
- Flex中CSS例子
- Flex弹性伸缩布局
- display:flex弹性布局
- flex弹性盒布局
- CSS3 弹性布局Flex
- flex弹性布局
- Flex弹性盒布局
- flex弹性盒子布局
- flex 弹性布局
- flex弹性布局图解
- flex弹性布局
- Flex弹性布局
- flex弹性布局
- flex弹性布局
- Android应对进程被杀死--Service(一)
- SEAndroid 知识点
- JS笔记03-BOM&(screen+history)
- POJ 1502 MPI Maelstrom Dijkstra算法 atoi函数
- java设计-代理模式
- css中flex:1弹性布局例子
- TortoiseSVN 客户端与 Android Studio 关联的二三事
- jQuery实战1:概述,环境准备及入门实例
- 前端用CryptoJS类库的AES加密,后端解密不出来
- mobile/移动端
- 停下来想一想:你为什么会离开游戏行业?
- vs2012如何运行vs2013和vs2015创建的项目
- float类型做为参数传递过程中出现的问题
- 11.4容器的打印