Flex布局演示01

Flex布局演示01

2009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

1、效果图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Flex布局演示01</title><style type="text/css">.box {display: flex;flex-flow: row wrap;justify-content: space-between;}.card {width: 100px;height: 100px;background: #f7ecb5;border: 1px solid #f7ecb5;margin: 10px;display: flex;justify-content: center;align-items: center;}</style>
</head>
<body>
<div class="box"><div class="card">1</div><div class="card">2</div><div class="card">3</div><div class="card">4</div><div class="card">5</div><div class="card">6</div><div class="card">7</div><div class="card">8</div><div class="card">9</div><div class="card">10</div><div class="card">11</div><div class="card">12</div><div class="card">13</div><div class="card">14</div>
</div>
</body>
</html>

怎么让每张卡片中的文字居中？

2、效果图

3、效果图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Flex布局演示01</title><style type="text/css">.box {display: flex;flex-flow: row wrap;justify-content: space-between;}.card {width: 100px;height: 100px;background: #f7ecb5;border: 1px solid #f7ecb5;margin: 10px;display: flex;justify-content: center;align-items: center;flex-grow: 1;}</style>
</head>
<body>
<div class="box"><div class="card">1. <img src="data:images/product1.jpg" width="30px" height="30px"></div><div class="card">2. <img src="data:images/product2.jpg" width="30px" height="30px"></div><div class="card">3. <img src="data:images/product3.jpg" width="30px" height="30px"></div><div class="card">4. <img src="data:images/product4.jpg" width="30px" height="30px"></div><div class="card">5. <img src="data:images/product5.jpg" width="30px" height="30px"></div><div class="card">6. <img src="data:images/product6.jpg" width="30px" height="30px"></div><div class="card">7. <img src="data:images/product7.jpg" width="30px" height="30px"></div><div class="card">8. <img src="data:images/product8.jpg" width="30px" height="30px"></div><div class="card">9. <img src="data:images/product9.jpg" width="30px" height="30px"></div><div class="card">10. <img src="data:images/product10.jpg" width="30px" height="30px"></div><div class="card">11. <img src="data:images/product11.jpg" width="30px" height="30px"></div><div class="card">12. <img src="data:images/product12.jpg" width="30px" height="30px"></div><div class="card">13. <img src="data:images/product13.jpg" width="30px" height="30px"></div><div class="card">14. <img src="data:images/product14.jpg" width="30px" height="30px"></div>
</div>
</body>
</html>

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。但是垂直居中，对于flex布局就是小菜一碟了。

Flex布局演示01相关推荐

flex布局演示(可线上运行项目)
flex布局演示(可线上运行项目) 代码: <!DOCTYPE html> <html lang="en"><head><meta cha ...
演示和解析Flex布局中的各种属性
文章目录文章导读一.justify-content center flex-start flex-end space-around space-evenly space-between 二.ali ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
Flex布局让你的布局更完美
Flex布局让你的布局更完美 CSS3 Flex布局有很多人和我一样吧,刚开始学HTML的时候用的都是传统的布局,有时用心设计的HTML+CSS样式可能由于对方的设备.浏览器的原因,导致用户浏览页 ...
css flex布局模型（CSS justify-content 属性） - 代码案例
css flex布局模型(CSS justify-content 属性) - 代码案例效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
html第八章制作花样链接卡,利用flex布局横向滚动制作滑动选项卡以及内容滑块...
利用flex布局横向滚动首先介绍一下什么是flex布局,为啥喜欢用flex布局呢,枫瑞之前在做项目的评论留言的时候采用浮动(float),又要两边对齐,有要左浮动,又要右浮动,最后话要防止塌陷.在认 ...
flex布局_flex 布局概述
flex 布局概述 1. flex 是什么 flex 是 Flexible Box 的缩写,意为弹性布局 flex 2009 年就已出现,浏览器兼容性很好 2. flex 解决了什么问题块级元素的垂 ...
flex布局 flex_时髦的Flickr Flex小部件
flex布局 flex A web widget, or badge, is a small, embeddable element that you can add to your site tha ...
Flex弹性盒子（一篇带你掌握潮流 Flex 布局）
文章目录 Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 1.2.Flex布局出现后 2.什么是Flex布局? 3.Flex container/item(父/子容器)的常用属性 4.L ...

Flex布局演示01

Flex布局演示01相关推荐

最新文章

热门文章