这几天做项目的时候,用的布局方式一般都是用
display float 来实现一个布局效果
偶然的看到flex才知道,原来我们有了更好的解决方式,这个属性是W3标准,可以放心使用,几乎兼容所有的主流浏览器
display: flex;
行内元素可以 display: inline-flex;
下面是我的个人学习,只有一点点,后续会加上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎来到华哥的弹性布局- 你的一哥</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
div.p {
display: flex; /* 定义容器的属性 */
flex-direction: column;
border: 1px solid red;
width: 600px;
height: 500px;
align-items: flex-start; /* 项目严交叉轴对应方式 = 即是垂直方向上的排序. */
}
div.children {
box-sizing: content-box;
display: flex;
/*flex-wrap: wrap; 是否换行 - 项目*/
flex-flow: row wrap;
/*justify-content: space-between;*//* 项目在主轴的对应方式 = 只要是flex里面的子元素都是自己的项目 */
border: 1px solid green;
width: 400px;
height: 88px;
}
div.children2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
border: 1px solid #999;
width: 400px;
height: 200px;
}
div.children2 .son {
border: 1px solid brown;
width: 160px;
height: 64px;
}
.one {
order: 2;
}
.two {
order: 5; /*属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。*/
}
.three {
order: 7;
}
div.son {
display: flex;
border: 1px solid pink;
width: 66px;
height: 44px;
}
div span {
border: 1px solid #000000;
display: inline-flex;
width: 30px;
height: 44px;
}
div.brother {
border: 2px solid royalblue;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="p">
<div class="children">
<div class="son">
<span>
</span>
</div>
<div class="son">
<span>
</span>
</div>
<div class="son">
<span>
</span>
</div>
<div class="son">
<span>
</span>
</div>
<div class="son">
<span>
</span>
</div>
<div class="son">
<span>
</span>
</div>
</div>
<div class="children2">
<div class="son one">
<span>
5
</span>
</div>
<div class="son two">
<span>
6
</span>
</div>
<div class="son three">
<span>
7
</span>
</div>
</div>
</div>
<div class="brother">
</div>
</body>
</html>
主要参考的是 : http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
有兴趣的可以看看,写的不错的.