Flex 布局 (两个div居中自适应 宽度变小变一列,宽度够就是两列)
2024-08-30 18:58:41
https://www.runoob.com/w3cnote/flex-grammar.html
display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;
两列Div居中 显示 用传统float方式就不是很好实现,本着能用css的 就不用js的原则。就用Flex布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box {
display: flex;/*flex布局*/
justify-content: center;/* justify-content属性定义了项目在主轴上的对齐方式。 横向对齐方式 */
align-items: stretch; /* align-items属性定义项目在交叉轴上如何对齐 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 */
flex-wrap: wrap; /* flex-wrap :定义子元素超过一行,如何换行 wrap:换行,第二行在第一行下面,从左到右 */
}
.boxInner{
width:650px;
height:30px;
background-color:#cccccc;
margin:10px;
}
</style>
</head> <body> <div class="box">
<div class="boxInner">1</div>
<div class="boxInner">2</div>
<div class="boxInner">3</div>
<div class="boxInner">4</div>
</div> </body>
</html>
如果后期在这个页面右侧加入一个DIV放右边的话,可以弄成float 左右俩,然后左侧的话宽度写成
float: left; width: calc(100% - 260px);
最新文章
- Egret Wiing3快捷键
- 二模13day1解题报告
- 【BZOJ 1911】【APIO 2010】特别行动队
- iOS开发中乱用hook可能导致灾难
- [LeetCode] Merge Sorted Array
- hdu3033 背包变形
- 【jqGrid for ASP.NET MVC Documentation】.学习笔记.3.本地化语言包
- 【WEB】原理 之 线程池
- python运维开发(十八)----Django(二)
- Ubuntu基础教程——安装谷歌Chrome浏览器
- Activity插件化解决方案
- 使用Asp.Net Core MVC 开发项目实践[第五篇:缓存的使用]
- 廖雪峰Java4反射与泛型-3范型-5extends通配符
- 单源最短路模板 + hdu - 2544
- 《RESTful Web APIs中文版》
- 深入分析ReentrantLock公平锁和非公平锁的区别
- gl attribute和uniform的用法
- 树上差分学习笔记 + [USACO15DEC]最大流$Max \ \ Flow \ \ By$
- Microsoft .NET Framework 4 安装 1603错误的解决
- 亚马逊拟斥资15亿美元建航空货运中心 - Amazon to spend $1.49 bln on air cargo hub, fans talk of bigger ambitions - ReutersFebruary 1, 2017