flex 垂直居中
<div id="parent">
<div id="child">
</div>
</div>
<style>
#parent {
display:flex;
width:300px;
height:300px;
outline:solid 1px;
justify-content:center;
align-content:center; //主轴居中对齐
align-items:center;//交叉轴的中点对齐
}
#child {
width:100px;
height:100px;
outline:solid 1px;
}
</style>
flex 两列等高
<div class="parent">
<div class="child">hahjdjjajdES6提供的Proxy可以让JS开发者很方便的使用代理模式,听说Vue</div>
<div class="child"></div>
</div>
<style>
.parent{
width: 300px;
display: flex;
align-content: center;
justify-content: center;
align-items: stretch;
}
.child{
width: 100px;
outline: solid 1px;
}
</style>
align-items:交叉轴的对齐方式
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
flex 自适应宽
<div class="parent1">
<div class="child1"></div>
<div class="child2"></div>
</div>
<style>
.child1 {
width:100px;
background-color:lightblue;
}
.child2 {
width:100px;
flex:1;
outline:solid 1px;
}
</style>
flex:1是flex-grow,flex-shrink,flex-basis的缩写
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。