1.flex<div class="parentDiv"> <div class="childDiv1"></div> <div class="childDiv2"></div></div>.parentDiv{ border:1px solid black; width:100%; height:800px; display:flex;.
<
div
class="wrapper" id="wrapper" style="
height
: 100%;">
<
div
class="searchForm" id="searchForm"></
div
>
<
div
class="tableContent" id="tableContent"></
div
>
</
div
>
var wrapper= document.getElementById('wrappe
经过验证，需要在父元素（
flex
-container）设置
height
=100%;而子元素不可以设置
height
=100%否则将失效
于是，如上图去除子元素的100%属性。
<
div
class="main-container">
<
div
class="left">
</
div
>
<
div
...
使用
flex
实现
视口完全撑满
再
flex
布局中，
flex
：；的取值是将缩小放大融合在一起的
一个
属性，所以在有些场景中，子元素要完全撑满父元素的方法，使用
flex
也能
实现
1.给父元素实施弹性布局；
2.给父元素vh，vw值
（vh，以及vw的取值其实是以百分比为单位的，例：1vh=1%vh）
3.对想撑满的元素实施
flex
：1；
这时就能看到，元素带有
flex
：1；的属性就会撑满
剩余
父元素宽度。
许久没有更新了，今天才意外发现以前还是没有看懂盒模型，今天才算看懂了，首先我们今天来看一下想要
实现
的效果是什么?当然适配是必须的，1920 或者 1376都测试过。效果如图所选中区域所示：
一、关于
flex
布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/
flex
-grammar.html这篇博客，我们主要用到
flex
布局的
一个
换行属性，它是
flex
-wrap: wrap，自动换行。
二、vue代码
（1）html部分：
<
div
class=home-item v-for=n i
<
div
style={{display:'
flex
',alignItems:'center',justifyContent: 'space-around',}}>
<
div
style={{display:'
flex
',alignItems:'center',
flex
Direction:'column'}}>
<
div
className="tit" >总人数</
div
>
1.什么是
flex
布局，它能做什么
flex
布局翻译为弹性布局，就是会根据外层容器的变化，呈现不同状态，使布局更加灵活方便，任意
一个
容器都可以被定义为
flex
布局，我们在平常开发中，移动端使用多一些，像水平排列的导航栏，还有页面上的元素布局，都可以使用
flex
布局。
看了一些文档，我们照猫画虎，也从它的6个属性出发实践一下，GO！！
注：六个属性分别是---
flex
-direction、
flex
-wrap、
flex
-flowjustify-content、align-items、align-cont.
