flex弹性布局
|
前段时间在刷网页的时候偶然看到一个面试题，大体是这么说的，定义一个父元素和子元素，其宽高都不确定（也就是是动态变化的），如何实现子元素在父元素中上下左右居中。 好家伙，我琢磨了一下，不给宽高是个坑啊，简单的html+css很难实现，我随即想到了js，js可以通过clientWidth和clientHeight获取元素宽高啊，我随手写了一段代码： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width: 600px;
height: 300px;
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
border: 2px solid greenyellow;
position: absolute;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var parent=document.getElementsByClassName("parent")[0];
var pWidth=parent.clientWidth;
var pHeight=parent.clientHeight;
var child=document.getElementsByClassName("child")[0];
var cWidth=child.clientWidth;
var cHeight=child.clientHeight;
child.style.left=pWidth/2 - cWidth/2 +"px";
child.style.top=pHeight/2 - cHeight/2 +"px";
}
</script>
</body>
</html>
为了效果明显，我给父元素和子元素都随机添加了宽高，当然我们随机改变宽高，不需要再改动其他代码，居中依然会实现。
那么，一个小小的居中效果需要这么繁琐的实现，是不是太不尽人意了，对，W3C替我们想到了，css3提供了flex布局模式，这类问题可迎刃而解 flex布局是什么呢？Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 至于定义在这不深挖，主要看技术实现 首先引入flex，很方便，我们只需要display：flex，这里会牵扯到兼容性问题，也不深究，文档网上有 有张图把flex描述地挺直观的，拿来分享一下
注：flex容器的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 容器的特性容器共可以设置六个属性
一.flex-direction这个是确定主轴方向的（即项目的排列方向） 它可以设置四个值
二.flex-wrap定义如果一条轴线排不下，如何换行 它可以设置三个值
三.flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 四.justify-content定义了项目在主轴上的对齐方式 它可能取五个值
五.align-items属性?????????
该属性定义项目在交叉轴上如何对齐。也就是默认的竖轴垂直方向上的对齐方式 它可以取五个值
|
