重新认识布局：你真的懂flex吗
本文首发于知乎：https://www.zhihu.com/people/xiao-chong-10-60
1.flex布局，里面的flex项目会脱标吗？
flex布局经常被拿来和浮动比较。但这里要明确：2者都能使得盒子横向排列之外，他们之间几无关联。
浮动的元素会脱标，父元素要有高度，我们得清除浮动。flex布局并不会脱标。这个所有的资料里并没仔细对比，但又很重要。
比如：做一个九宫格，同样的结构，浮动和flex布局的写法不一样，浮动是脱标的，左右，上下的边框加粗的问题，可以用margin负值搞定。看下面的例子，怎么解决边框加粗的问题？水平方向上：margin-left:-1px;竖直方向上：margin-top:-1px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 任务：做一个九宫格，3*3的样式，每个格子大小为60px*60px */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
ul {
width: 180px;
height: 180px;
margin: 10px auto;
}
ul li {
float: left;
width: 60px;
height: 60px;
background-color: pink;
text-align: center;
line-height: 60px;
border: 1px solid #000;
margin-left: -1px;
margin-top: -1px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
假设我们用flex做呢，边框加粗的问题还能用浮动一样的做法吗？答案是不行。浮动是脱标的，flex并不是，浏览器绘制盒子的过程有区别。水平方向上的边框加粗用margin-left:-1px可以解决，竖直方向上用margin-top:-1px：不行。
怎么办呢，让第二行的上下边框都去掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 任务：做一个九宫格，3*3的样式，每个格子大小为60px*60px */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
ul {
display: flex;
flex-wrap: wrap;
width: 180px;
height: 180px;
margin: 10px auto;
}
ul li {
width: 60px;
height: 60px;
background-color: pink;
text-align: center;
line-height: 60px;
border: 1px solid #000;
margin-left: -1px;
}
.second-row {
border-top: 0;
border-bottom: 0;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="second-row">4</li>
<li class="second-row">5</li>
<li class="second-row">6</li>
<li class="third-row">7</li>
<li class="third-row">8</li>
<li class="third-row">9</li>
</ul>
</body>
</html>
2.flex布局，剩余的空间会占满吗？
并不会，剩余的空间分配,主轴上，由子项目的flex属性指定。侧轴会占满父盒子。请看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 1000px;
height: 200px;
background-color: pink;
}
.box .left {
width: 200px;
height: 100px;
background-color: purple;
}
.box .right {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">我设置了宽高</div>
<div class="right">我宽高都没设置</div>
</div>
</body>
</html>
浙公网安备 33010602011771号