css弹性盒模型详解----flex-wrap

本篇文章详细介绍flex-wrap

     flex-wrap是控制盒模型容器下一级子元素的在一行显示的时候是否换行nowrap（默认值）：不换行wrap：自动换行wrap-reverse：换行，第一行在下方。

//第一条属性 默认的nowrap 不换行<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.flex-box{width: 1000px;margin: 0 auto;background-color: #ccc;display: flex;}.box{width: 400px;height: 100px;background-color: red;color: blue;margin-right: 50px;}</style>
</head>
<body><div class="flex-box"><div class="box">1111111</div><div class="box">222222</div><div class="box">3333</div></div>
</body>
</html>//说明  从代码中可以看出三个三个总宽度是1200px+150px  父元素的宽度是1000  当出现这样的情况 不是会出现子元素溢出父元素  而是三个子元素自动等比例缩放了

效果演示如下：

//第二条属性 wrap 换行<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.flex-box{width: 1000px;margin: 0 auto;background-color: #ccc;display: flex;flex-wrap:wrap;}.box{width: 400px;height: 100px;background-color: red;color: blue;margin-right: 50px;margin-bottom: 10px;}</style>
</head>
<body><div class="flex-box"><div class="box">1111111</div><div class="box">222222</div><div class="box">3333</div></div>
</body>
</html>

效果演示如下:

//第三条属性wrap-reverse：换行，第一行在下方。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.flex-box{width: 1000px;margin: 0 auto;background-color: #ccc;display: flex;flex-wrap: wrap-reverse;}.box{width: 400px;height: 100px;background-color: red;color: blue;margin-right: 50px;margin-bottom: 10px;}</style>
</head>
<body><div class="flex-box"><div class="box">1111111</div><div class="box">222222</div><div class="box">3333</div></div>
</body>
</html>

效果演示如下：

css弹性盒模型详解----flex-wrap相关推荐

css弹性盒模型详解----flex-direction
本篇文章详细介绍flex-direction flex-direction 是控制盒模型容器下一级子元素的排列方式的属性一共有四种row(默认值):主轴为水平方向,起点在左端.row-reverse ...
CSS——弹性盒模型(Flex)
CSS--弹性盒模型前言本文大部分参考自阮一峰老师和B站后盾人的Flex布局教程. 原文地址:
最流行的布局方案 Flex 弹性盒布局详解
Flex布局又称弹性盒布局,是在CSS3中的一种新布局方式,可以简洁.方便.响应式地实现各种页面布局,因此自一提出受到了极大地追捧,目前也得到了各大主流浏览器的支持,因此迅速替代了之前的"d ...
CSS 弹性盒子布局详解
CSS 弹性盒子弹性盒子是CSS3的一种新布局模式.是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 弹性盒子布局是一种在前端HTML开发中比较常用的布局方式,还有 ...
06-CSS盒模型详解
本文最初发表于博客园,并在GitHub上持续更新.以下是正文. 盒子模型前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并 ...
CSS弹性盒模型——flex详解
什么是flex 为什么用flex 初识flex flex-主轴方向与换行 flex-direction 例子: <!DOCTYPE html> <html lang="en ...
css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
弹性盒模型的实际应用
现在是凌晨4.45分,刚才解决了一个棘手的问题,乘着这股余劲,我要把刚才查阅的.测试的以及平时不怎么关注的知识点再理一遍.今天收获真的大. 1.css清除浮动.父元素如果没有设置高度,将默认由子元素撑 ...
2.HTML、CSS初识盒子模型详解行高理解
什么是语言? 1. 语言是一个沟通工具: 2. 人与人之间的沟通交流我们会用到语言,比如: 汉语.英语-- : 3. 作为前端工程师,要与浏览器沟通交流,就要用到浏览器所能识别的语言. 浏览器 3大语 ...

css弹性盒模型详解----flex-wrap

本篇文章详细介绍flex-wrap

效果演示如下：

效果演示如下:

效果演示如下：

css弹性盒模型详解----flex-wrap相关推荐

最新文章

热门文章