flexbox 心得
- flex-direction 决定主轴的方向，主轴的方向可以是水平的，也可以是垂直的 justify-content决定主轴上项目的排列方式。
- align-content 决定辅轴元素的排列方式，只有当里面元素出现折行的时候，才会起作用，并且会覆盖align-items的属性，不起作用。
- 在使用flex布局的时候，需要解决的移动端的兼容问题，配合autoprefixer自动添加前缀，来处理（可以解决flex多版本的兼容问题）。对里面的项目元素使用flex:1,平分空间。
flex:1 相当于
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
理解为:1.如果一个div元素中只有一个子元素设置了flex:1;那么它将占有剩余空间的全部，相当于100%;
2.如果有div包含有三个元素，其中两个分别设置了 flex:1; flex:2; 那么就是这两个元素，就是平分剩余空间，一个是1/3;一个是2/3；
总结: 占有几分之几，主要看，子元素中，共有多少个元素设置了flex:{n};属性;如果仅有一个元素设置了 flex:1;那就是它占有剩余空间的100%；这时候设置flex:2,3,4....其实都是一样的。
flex: 0 0 250px; 相当于给元素设置了宽度。
flex-grow: 0;
flex-shrink: 0;
flex-basis: 250px;
给div元素设置display:flex;默认宽度是100%;但是高度为0;
- 要想div自适应窗口高度，就需要设置高度100%（前提html,body 的高度必须设置为100%）或者设置height:100vh;vh就是div的高度相对视窗的高度的百分比，100vh就是100%的高度;同样还是有vw -> div的宽度相对视窗口的宽度，90vw就是90%; 100vw;就是100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html,body{
height: 100%;
}
.main{
display: flex;
height: 100vh;
background: #675959;
}
.left{
flex:0 0 20vw;
background: #ccc;
}
.right{
flex:1;
display: flex;
flex-direction: column;
background: #aaa;
}
.box{
font-size: 60px;
color: #fff;
padding: 10px;
}
.r-header{
display: flex;
height: 20vh;
background: #333;
font-size: 16px;
}
.r-header h4{
flex:1;
}
.r-header .login{
flex:1;
}
.r-header .info{
flex:1;
}
.r-main{
flex:1;
background: #444;
}
.r-footer{
background: #555;
height: 10vh;
}
.box9{
display: flex;
/*justify-content: space-between;*/
flex-wrap: wrap;
margin:1px 0 0 1px;
}
.box9 div{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 33.3333%;
/*height: 30vh;*/
background: #999;
border:1px solid #ccc;
margin:-1px 0 0 -1px;
}
</style>
</head>
<body>
<div class="main">
<div class="left box">aside</div>
<div class="right box">
<header class="r-header box">
<h4>LOGO</h4>
<div class="info">Info</div>
<div class="login"><a href="">login Out</a><a href="">login In</a></div>
</header>
<div class="r-main box">Main
<div class="box9 box">
<div>1<span>女装</span></div>
<div>2<span>男装</span></div>
<div>3<span>家居</span></div>
<div>4<span>小家电</span></div>
<div>5<span>彩票</span></div>
<div>6<span>智能设备</span></div>
<div>7<span>美食</span></div>
<div>8<span>旅游</span></div>
<div>9<span>美妆</span></div>
</div>
</div>
<footer class="r-footer box">Footer</footer>
</div>
</div>
</body>
</html>
