很多很多的情况下,我们会用到这个样式
long long ago,当我还刚入行的时候,我看到上面的布局想到的是浮动,计算出每一个的大小
但是!!!!现在的我没有付出秃的代价,也知道了怎么不去使用浮动实现上线的效果,(编不下去了。无视这一段吧)知道了用flex布局的用法,先把代码写上去:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.demo {
width: 620px;
border: 1px solid #000;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
display: flex;
flex-direction: row;
justify-content: center
}
.demo div {
width: 100px;
margin-top: 10px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 10px;
box-sizing: border-box;
border: 1px solid #000000;
border-radius: 50%;
}
</style>
<body>
<div class="demo">
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
</div>
</body>
<script type="text/javascript" src="js/less.js"></script>
</html>
效果图大概是这样的:
虽然与预期的不大一样,但是不要介意,然后我们再来看一次常用的例子
预期效果图:
这个也是很容易遇到的布局,很多时候当然是左边一个float,右边一个float,当然, 也可以不用的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.demo {
display: flex;
width: 750px;
border: 1px solid #000;
box-sizing: border-box;
justify-content: space-around;
}
.demo>div {
flex: none;
}
.left {
width: 200px;
height: 100px;
margin-top: 50px;
background: #d4cdcd;
}
.right {
width: 380px;
height: 200px;
}
.right p:nth-child(1){
margin-top: 50px;
}
</style>
<body>
<div class="demo">
<div class="left"></div>
<div class="right">
<p>时间</p>
<p>地点</p>
</div>
</div>
</body>
</html>
效果图大概是这样子的:
不要在意像不像,大致布局出来就好了,而且看代码,也可以发现之前一致导致的布局坍塌也没了,当然这才是我想表达的重点,
然后再讲解(网上抄袭)下flex布局的解释
简单来说,除了一些老旧的浏览器,基本flex还是支持性很强的,由于网上的资源比较多,我就不多说,这种东西没必要去过多的抄袭,基本多做几个布局就明白了