flex布局教程（移动端app开发float会不兼容吗）

本文目录

• 移动端app开发float会不兼容吗
• 5.flex布局中对容器设置的属性有哪些
• flex 怎么设置 自动换行的布局
• CSS3中的弹性框布局Flexbox可以实现的效果有哪些
• css如何实现n宫格布局
• RN笔记：样式布局总结
• 关于html如何打造动画可爱的蛙蛙表情的案例分享
• 如何使用CSS3实现弹性盒子布局方式
• margin在flex布局的妙用

移动端app开发float会不兼容吗

可以分成两部分理解1.服务器端开发，也叫后台开发，这是唯一的，对应不同的平台，他负责数据的分发与存储，和一些逻辑的处理.逻辑处理的多少由业务的复杂程度决定。服务端相对独立，与平台没啥关系.2..1中不同的平台指web平台、移动设备平台等，移动设备又可分为andriod平台、iPhone平台等每个平台都有自己的规范和开发技术。web平台的规范是键盘+鼠标，开发技术是html+css+javascript；移动设备平台的规范是键盘+手指（触摸和手势），技术iphone是Objective-C，android是java。业界很少有说移动web前端开发的，都是移动web开发.而web app特指的是用html5技术开发，之所以叫web app是因为他比较接近客户端应用程序的用户体验，可以和系统深度融合，调用一些只有客户端才能调用的功能（比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能）.通常你看到的一些文章中会提到web app 和native app,这里的web app指的是mobile web app,而移动web和web开发没本质的区别，但需要不同的开发框架，以解决在移动设备上的适配问题和一些特殊的操作以及功能调用。最后总结一下，web开发利用的是基于浏览器的网页语言技术，native app开发利用的是基于操作系统的程序语言技术，web app介于两者之间.当然现在比较流行混合型app，这个可以多百度一下.

5.flex布局中对容器设置的属性有哪些

Flex布局中对容器一共有6个属性，作用如下：

1. flex-direction            主轴方向

2. flex-wrap                  轴线排不下，如何换行

3. flex-flow                    是flex-direction属性和flex-wrap属性的简写形式

4. justify-content          项目在主轴上的对齐方式

5. align-items                项目在交叉轴上的对齐方式

6. align-content           定义多根轴线的对齐方式

搜一下“Flex 布局教程：语法篇”可以找到阮一峰的一个博客，讲得挺详细。

flex 怎么设置 自动换行的布局

flex-align：默认是设置垂直方向的对齐方式，值： start、end、center、stretch、baseline。flex-pack：设置子元素之间如何分配多余空间，值：start、end、center、justify。flex-direction：设置子元素的排列方式， row、row-reverse、column、column-reverse。flex-wrap：设置子元素的是否自动换行和排列方向，值：nowrap、wrap和wrap-reverse。-ms-flex：设置子元素弹性，参数，分别是正弹性、负弹性和默认大小。其实布局还有好多新玩法，你可以多看看相关的教程，比如说现在有个视频的系列名称叫做 《Buid New World》，里面有一集专门讲 CSS3 复杂布局形式

CSS3中的弹性框布局Flexbox可以实现的效果有哪些

flex-box 弹性布局可以实现的效果：自适应布局，效果图如下：

代码如下：

《!DOCTYPE HTML》《html》 《head》  《meta charset="utf-8"》  《title》 flex box 弹性布局 《/title》  《meta name="Keywords" content=""》  《meta name="Description" content=""》  《style type="text/css"》

html,body{height:100%;margin:0;}/*需要添加高度控制，否则无法撑满整个屏幕*/body{display:-webkit-box;-webkit-box-orient:vertical;/*按照垂直方向上进行自适应处理*/}.content{-webkit-box-flex:1;/*分配剩余的所有空间*/} .header{height:50px;min-width:500px;}/*顶部模块高度定死*/ .logo{width:100px;height:50px;background:#99f;}/*为区分模块，设置了背景色 logo部分固定宽高*/ .nav{height:50px;background:#ccc;}/*nav模块不固定宽度*/

.content{min-height:100px;}/*为防止之后的调整窗口大小是出现影响视觉效果的问题，特设置最小高度*/

.content,.header{display:-webkit-box;/*为content,header部分也添加box的展示模式*/}.nav{-webkit-box-flex:1;}.con2{-webkit-box-flex:1;}

.con1{width:200px;background:#f99;}/*固定宽度，高度不定*/ .con2{min-width:200px;background:#999;}/*同上的min-height*/ .con3{width:100px;background:#9f9;}/*固定宽度，高度不定*/ .footer{height:50px;min-width:500px;background:#ccc;}/*固定高度*/  《/style》  《link href="" style="text/css" rel="stylesheet"/》 《/head》 《body》  《div class="header"》 《div class="logo"》logo部分，宽高固定《/div》 《div class="nav"》nav部分，高度固定，宽度自适应《/div》  《/div》  《div class="content"》 《div class="con1"》内容初始化第1模块《/div》 《div class="con2"》内容初始化第2模块《/div》 《div class="con3"》内容初始化第3模块《/div》  《/div》  《div class="footer"》底部，宽度不定，高度固定《/div》 《/body》《/html》

css如何实现n宫格布局

设计思路(无关你是scss还是less)1、为了方便内部元素水平/垂直居中, 整体我们用flex布局.2、使用正方形占位, 因为用了padding-top:100%, 所以我们就需要再单独用一个div来装内容, 我给他起名"item__content".3、为了让内容的容器div充满方块, 我们给他设置样式:position:absolute;top:0;left:0;right:0;bottom:0;;（推荐教程：CSS入门教程）HTML代码《!-- a-grid是一个flex容器, 方便他的内容做"水平/垂直居中" --》《div class="a-grid"》 《!-- a-grid__item用来占位实现正方形 --》 《div class="a-grid__item"》 《!-- item__content才是真正装内容的容器 --》 《div class="item__content"》 内容... 《/div》 《/div》《/div》CSS代码为了不冗余, 我把公共的部分抽离的出来起名".a-grid";mixin支持4个参数, 分别是$row(行数), $column(列数), $hasBorder(是否有边框), $isSquare(是否保证每个块是正方形).mixin内部通过计算并结合:nth-child实现"整体无外边框"的效果.a-grid { display: flex; flex-wrap: wrap; width: 100%; .a-grid__item { text-align:center; position:relative; 》.item__content { display:flex flex-flow: column; align-items: center; justify-content: center; } }} @mixin grid($row:3, $column:3, $hasBorder:false, $isSquare:true) { @extend .a-grid; .a-grid__item { flex-basis: 100%/$column; @if($isSquare) { padding-bottom: 100%/$column; height: 0; } 》.item__content { @if($isSquare) { position:absolute; top:0;left:0;right:0;bottom:0; } } } @for $index from 1 to (($row - 1) * $column + 1) { .a-grid__item:nth-child(#{$index}) { @if($hasBorder) { border-bottom: 1px solid #eee; } } } @for $index from 1 to $column { .a-grid__item:nth-child(#{$column}n + #{$index}) { @if($hasBorder) { border-right: 1px solid #eee; } } }}使用// 生成一个 3行3列, 正方形格子的宫格.a-grid-3-3 { @include grid(3, 3, true);} // 生成一个 2行5列, 无边框宫格, 每个格子由内容决定高度.a-grid-2-5 { @include grid(2, 5, false, false);}提醒大家: 如要做n x m的布局, 用@include grid(n, m)后千万别忘了在html中添加 n x m个对应的dom结构。相关视频教程推荐：css视频教程

RN笔记：样式布局总结

flex 弹性布局 number 用于设置弹性盒模型分配空间，比如: flex:1

flexDirection 主轴的方向 enum(’row’,’row-reverse’,’column’,’column-reverse’)

justifyContent 主轴对齐方式 enum(’flex-start’,’flex-end’,’center’,’space-between’,’space-around’)

**alignItems ** 交叉轴对齐方式 enum(’flex-start’,’flex-end’,’center’,’stretch’)

结合使用实现垂直居中： {flexDirection:’row’,justifyContent:’center’,alignItems :’center’}

flexWrap 轴线 enum(’wrap’, ’nowrap’)

alignSelf enum(’auto’, ’flex-start’, ’flex-end’, ’center’, ’stretch’) alignSelf决定了元素在父元素的次轴方向的排列方式（此样式设置在子元素上），其值会覆盖父元素的alignItems的值

加载本地图片 《Image source={require(’./my-icon.png’)} /》 加载网络图片 《Image source={{uri: ’图片地址’}} /》 背景图片使用 《ImageBackground/》 tip:图片必须要设置宽高，要使图片自适应宽度高度显示，使用： react-native-fit-image resizeMode enum(’cover’,’contain’,’stretch’)

宽度

颜色

外边距

内边距

圆角

样式 borderStyle：边框样式’solid’实线，’dotted’点， ’dashed’虚线

阴影（只对ios生效，可使用插件： react-native-shadow ）

position enum(’absolute’,’relative’) left/top/right/bottom 偏移距离

默认情况下，渐变色的方向是从上向下的，假如你想渐变色从左向右，或者斜角渐变，就需要设置下了start ,end 参数 start:{ x: number, y: number } end:{ x: number, y: number } 其他设置，请详细看插件教程

关于html如何打造动画可爱的蛙蛙表情的案例分享

先感受一下全部表情包：在开始之前先安利一个知识点：Flex弹性布局我们一般做水平三列布局都是用的float方法，将每一块浮动显示在同一行。这种方法会导致元素没有原来的高度属性，要用清除浮动来解决空间占据问题。对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了几乎所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。基本语法查看博客：Flex 布局教程：语法篇另外还要对css中的伪元素有一定的了解：before、after最后想要表情动起来，最主要的就是animation属性的使用了。整体布局我们先对整体座椅个布局，使各个表情能直观的展示在各个位置上，因为每个表情几乎占据的是一个正方形的空间，所以我们将每个青蛙表情水平展示在页面上，这里就用到了flex布局方式。《p class="container"》《!--所有表情的存放容器，flex布局，所有子项目水平显示，自动换行，水平居中显示，竖直方向从顶部开始--》《p class="emoji-container"》 《!--存放青蛙表情的大容器，控制大小间距之类的属性--》 《p class="icon"》 《!--存放每一个青蛙表情的容器，控制每一个表情自己的位置和特征--》 《p class="frog" id="frog-n"》《/p》《/p》《/p》《/p》body {background-color: #F1FFE6;}.container {width: 950px;margin: 70px auto 0px auto;text-align: center;}.container .emoji-container {/*flex弹性布局，多用于左右并排布局，跟float的作用类似，不用清除浮动*/display: -webkit-box; display: -ms-flexbox;display: flex;/*justify-content属性定义了项目在主轴上的对齐方式。center就是在x轴上居中显示*/-ms-grid-column-align: center; justify-items: center;/*align-items属性定义项目在交叉轴上如何对齐。flex-start就是从y轴的最上端开始排列*/-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;/*flex-wrap属性定义，如果一条轴线排不下，如何换行。wrap：换行，第一行在上方。*/-ms-flex-wrap: wrap; flex-wrap: wrap;}.container .emoji-container .icon {margin-right: 40px;margin-bottom: 40px;}.container .emoji-container .icon:nth-child(6n) {margin-right: 0px;}.icon {width: 125px;height: 120px;position: relative;}.icon .frog {position: absolute; top: 0;left: 0;width: 100%;height: 100%;}蛙蛙的通用样式观察一个每一个蛙蛙表情，虽然每一个表情形态各异，但是它们的身体、嘴巴、眼睛、小红晕的位置和大小几乎都是一致，这些一致的样式我们可以写成公用样式，每个蛙蛙的特征再根据每个人蛙蛙的id写单个的样式进行重绘或者覆盖。《p class="frog" id="frog-1"》 《!-- 蛙蛙的身体部分 --》 《p class="body"》 《!-- 蛙蛙的嘴巴 --》 《p class="mouth"》《/p》 《/p》 《!-- 蛙蛙的眼睛 --》 《p class="eyes"》 《!-- 蛙蛙的左右眼睛 --》 《p class="eye eye-left"》 《!-- 蛙蛙的内眼圈儿 --》 《p class="eye-inner"》 《!-- 蛙蛙的眼珠 --》 《p class="pupil"》 《!-- 蛙蛙眼圈里的光晕 --》 《p class="light"》《/p》 《/p》 《/p》 《/p》 《p class="eye eye-right"》 《p class="eye-inner"》 《p class="pupil"》 《p class="light"》《/p》 《/p》 《/p》 《/p》 《/p》 《/p》 /*蛙蛙身体部分样式*/ .icon .frog .body { width: 110px; height: 86px; background-color: #A3D768; border-radius: 50%; position: absolute; top: 25px;left: 0; right: 0; margin: auto;box-shadow: 4px 4px 0px 0px rgba(163, 215, 104, 0.3);}/*蛙蛙嘴巴部分样式，因为每个蛙蛙的嘴巴不一样，所以公共样式就只定义了位置*/.icon .frog .body .mouth {margin: auto;}.icon .frog .eyes {width: 86px;height: 35px;position: absolute; top: 8px;left: 0;right: 0;margin: auto;}/*蛙蛙眼睛部分样式*/.icon .frog .eyes .eye {width: 35px;height: 35px;}.icon .frog .eyes .eye:before {content: "";display: block;width: 100%;height: 100%; background-color: #A3D768;border-radius: 50%;}/*蛙蛙眼圈部分样式*/.icon .frog .eyes .eye .eye-inner {background-color: #fff;width: 80%;height: 80%; position: absolute;top: 10%;left: 10%;border-radius: 50%;}/*蛙蛙眼珠部分样式*/.icon .frog .eyes .eye .eye-inner .pupil {background-color: #3F6A34; width: 60%;height: 60%;position: absolute;top: 20%;left: 20%;border-radius: 50%;}/*蛙蛙眼珠里的亮光部分样式*/.icon .frog .eyes .eye .eye-inner .pupil .light {background-color: #fff; width: 50%;height: 50%;position: absolute;top: 10%;left: 10%;border-radius: 50%;}/*蛙蛙左右两边眼睛的位置*/.icon .frog .eyes .eye-left {position: absolute;top: 0px;left: 0;}.icon .frog .eyes .eye-right {position: absolute;top: 0px;right: 0;}蛙蛙基本公用样式.png第一只小青蛙第一只小青蛙第一只小青蛙是在基本样式的基础上有一个嘴角上扬的动态效果，所以要完成第一只蛙蛙的绘制，只要在公用样式的基础上加上嘴巴的动效就可以了，dom结构也是一样的。.frog#frog-1 .body .mouth {width: 18px;height: 22px;border-bottom: 3px solid #3F6A34;position: absolute;top: 6px;left: 0;right: 0;-webkit-animation: smile 3.8s linear 0s infinite; animation: smile 3.8s linear 0s infinite;}@-webkit-keyframes smile {0% { border-radius: 0%;}20% { border-radius: 50%;}70% { border-radius: 50%;}}@keyframes smile {0% { border-radius: 0%;}20% { border-radius: 50%;}70% { border-radius: 50%;}}第一只蛙蛙动图.gif第二只小青蛙第二只小青蛙的嘴巴是一个大嘴巴，脸颊上还有两个小红晕，眼睛是冒着爱心的，所以在dom结构上要加上红晕的p，嘴巴眼睛的样式也要做相应的修改。（主要是嘴巴、红晕和红色爱心的制作）《p class="frog" id="frog-2"》 《p class="body"》 《!--存放蛙蛙的脸颊红晕--》 《p class="blush"》《/p》 《!--加上大嘴巴的class big-month--》 《p class="mouth big-mouth"》《/p》 《/p》 《p class="eyes"》 《p class="eye eye-left"》 《p class="eye-inner"》 《p class="pupil"》 《p class="light"》《/p》 《/p》 《/p》 《/p》 《p class="eye eye-right"》 《p class="eye-inner"》 《p class="pupil"》 《p class="light"》《/p》 《/p》 《/p》 《/p》 《/p》 《/p》/*第二只青蛙脸颊两边的红晕样式* /.icon .frog .body .blush {width: 75px;height: 9px;position: absolute; top: 20px;left: 0;right: 0;margin: auto;}.icon .frog .body .blush:before, .icon .frog .body .blush:after { content: "";display: block;width: 12px;height: 100%;background-color: #F7D2C9;border-radius: 50%;}.icon .frog .body .blush:before {position: absolute;top: 0;left: 0;}.icon .frog .body .blush:after {position: absolute;top: 0;right: 0;}/*第二只青蛙的嘴巴样式，用圆角和阴影的方式制作而成*/.icon .frog .body .big-mouth {width: 30px;height: 20px;border-radius: 0 0 50% 50%; box-shadow: 2px 2px 0px 0px rgba(63, 106, 52, 0.3);}.frog#frog-2 .mouth {background-color: #fff;position: absolute;top: 30px;left: 0;right: 0;}/*第二只青蛙的眼睛样式，将眼圈的背景设置为透明色，圆圈里面的亮光隐藏*/.frog#frog-2 .eye-inner {top: 17%;background-color: transparent !important;-webkit-animation: hearts 0.6s linear 0s infinite alternate; animation: hearts 0.6s linear 0s infinite alternate;}@-webkit-keyframes hearts {0% { -webkit-transform: scale(0.7); transform: scale(0.7);}100% { -webkit-transform: scale(1); transform: scale(1);}}@keyframes hearts {0% { -webkit-transform: scale(0.7); transform: scale(0.7);}100% { -webkit-transform: scale(1); transform: scale(1);}}/*第二只青蛙的眼睛的爱心样式，左上角和右上角设置交圆角50%，然后左右对应的旋转45度合并成一个爱心的形状*/.frog#frog-2 .eye-inner:before, .frog#frog-2 .eye-inner:after {content: "";display: block; height: 70%;width: 40%;background-color: #C71F1C;border-radius: 50% 50% 0 0;}.frog#frog-2 .eye-inner:before {position: absolute;top: 0;left: 5px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}.frog#frog-2 .eye-inner:after {position: absolute;top: 0;right: 5px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}.frog#frog-2 .eye-inner .pupil {display: none;}第二只蛙蛙动图.gif第三只小青蛙第三只小青蛙相对于公共样式的变化是眼睛和嘴巴的变化，所以最主要的是画出左眼样式和嘴巴样式。舌头的制作一个椭圆旋转对应的角度额按后被嘴巴遮挡住一部分制作而成，第三只青蛙的舌头分解显示.png《p class="frog" id="frog-3"》 《p class="body"》 《p class="mouth"》 《!--存放舌头样式的容器--》 《p class="toungue"》《/p》 《/p》 《/p》 《p class="eyes"》 《!--左眼添加wink的样式，作为左眼眯眼样式--》 《p class="eye eye-left wink"》 《p class="eye-inner"》 《p class="pupil"》 《p class="light"》《/p》 《/p》 《/p》 《/p》 《p class="eye eye-right"》 《p class="eye-inner"》 《p class="pupil"》 《p class="light"》《/p》 《/p》 《/p》 《/p》 《/p》 《/p》/*第三只小青蛙的左眼眯眼样式*/.icon .frog .eyes .eye.wink .eye-inner { background-color: transparent; width: 17px; height: 3px; background-color: #3F6A34; border-radius: 0; position: absolute; top: 15px; left: 0; right: 0; margin: auto; -webkit-transform: rotate(21deg); transform: rotate(21deg);}.icon .frog .eyes .eye.wink .eye-inner:before, .icon .frog .eyes .eye.wink .eye-inner:after { content: ’’; display: block; width: 17px; height: 3px; background-color: #3F6A34;}.icon .frog .eyes .eye.wink .eye-inner:before { -webkit-transform: rotate(25deg); transform: rotate(25deg); position: absolute; top: -4px; left: 0;}.icon .frog .eyes .eye.wink .eye-inner:after { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); position: absolute; top: 4px; left: 0;}.icon .frog .eyes .eye.wink .pupil { display: none;}/*第三只小青蛙的右眼亮光位置*/.frog#frog-3 .eye-right .light { position: absolute; top: 10%; left: auto; right: 10%;}/*第三只小青蛙的嘴巴吐舌头样式*/.frog#frog-3 .mouth { width: 25px; height: 25px; position: absolute; to

如何使用CSS3实现弹性盒子布局方式

传统的布局方案是依据float，display和position的盒子模型，随着开发语言的完善，弹性盒布局模型成为Web开发人员工具箱中的一个很好的工具，因为摈弃了传统盒子复杂的设置并且可以很完美的契合开发者对于页面兼容性的要求，即当页面需要适应不同的屏幕大小以及设备类型时依然可以确保元素拥有恰当的行为。本篇文章给大家带来的内容是关于如何快速使用弹性盒子布局，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。对于弹性盒子的理解弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成，而弹性容器则可以通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器，其中弹性容器内可以包含了一个或多个弹性子元素。传统的盒子模型对于那些特殊页面的布局非常的不方便，比如垂直居中，子元素排序的实现就很麻烦。然而随着w3c提出了flex布局，可以简便、完整、响应式地实现各种页面布局，大大的简化了开发过程，并且Flex布局已经得到了所有的浏览器的支持。相关课程推荐：flex布局视频教程推荐：2018最新5个flex弹性布局视频教程弹性盒子的实例实例一：传统模型《style》 .flex-container{ display: flex; display: -webkit-flex; width: 450px; height: 150px; background-color: darkcyan; } .flex-item{ width: 130px; height: 125px; margin: 10px; background-color: yellowgreen; } 《/style》 《body》 《div class="flex-container"》 《div class="flex-item one"》盒子1《/div》 《div class="flex-item tow"》盒子2《/div》 《div class="flex-item three"》盒子3《/div》 《/div》 《/body》结构如图所示实例二：子元素排序《style》 .flex-container{ display: flex; display: -webkit-flex; width: 450px; background-color: darkcyan; flex-direction: row-reverse; } .flex-item{ width: 130px; height: 125px; margin: 10px; background-color: yellowgreen; } 《/style》 《body》 《div class="flex-container"》 《div class="flex-item one"》盒子1《/div》 《div class="flex-item tow"》盒子2《/div》 《div class="flex-item three"》盒子3《/div》 《/div》 《/body》结构如图所示实例三：盒子居中显示《style》 .flex-container{ display: flex; display: -webkit-flex; width: 500px; background-color: darkcyan; justify-content: center; } .flex-item{ width: 130px; height: 125px; margin: 10px; background-color: yellowgreen; } 《/style》 《body》 《div class="flex-container"》 《div class="flex-item one"》盒子1《/div》 《div class="flex-item tow"》盒子2《/div》 《div class="flex-item three"》盒子3《/div》 《/div》 《/body》结构如图所示实例四：从底部开始显示《style》 .flex-container{ display: flex; display: -webkit-flex; width: 500px; height: 211px; background-color: darkcyan; align-items: flex-end; } .flex-item{ width: 130px; height: 125px; margin: 10px; background-color: yellowgreen; } 《/style》 《body》 《div class="flex-container"》 《div class="flex-item one"》盒子1《/div》 《div class="flex-item tow"》盒子2《/div》 《div class="flex-item three"》盒子3《/div》 《/div》 《/body》结构如图所示

margin在flex布局的妙用

直奔主题，我们来看一个情况： 上面就是描述问题的最简单的结果，一个div中有两个子div，要求是第一个div居左，第二个div居右，位置不能变化，第一个div有可能隐藏。 那么问题来了，如何使用flex来实现这种布局呢？ 大家很容易想到，父容器flex, justify-content：space-between不就好了吗? 如果第一个元素不隐藏，那毋庸置疑，但是如果第一个元素隐藏，那么第二个元素会自动跑到左边，这样行不通的哟。我也是想了好一段时间，都没想到最好的方案。 最终在知乎上找到了同类型的问题， 如何解决前端的flex流动布局中的单个子元素位置？ 。margin在flex布局中，子元素margin为auto的时候，伸缩包含块剩余的空间将会分配到flex-item的外边距margin上，那这个问题的答案就可以对第二个flex-item添加margin-left: auto来完美解决。同时，这个也很完美的解决了当flex容器下有三个子元素时，要求两个元素居左一个元素居右的这种情况。就不用对两个元素这边再加一个flex容器包裹了。简直不要太完美。 在网上看到的绝大多数flex教程都没有提到过关于margin在flex布局中的应用，这也是此文的意义，希望能帮助到大家，同时希望大家更深入或者找到第一手资料学习。不过大家也许和我一样懒，那我们就多百度咯，毕竟第一手资料读起来不是一般的难受。苦笑。 ***隐藏网址***