两端对齐和列表布局
2020年3月6日23点16分
00 、一抹前言 and 两端对齐
今天在看张鑫旭的博客的时候，突然灵光乍现，想到之前工作中一个没解决的问题，文字的两端对齐，产品要求 UI，UI 要求我右面的文字要和前面的文字一样对齐，不能参差不齐，结果就是来回调了一天半，没成功最后就长成下面这个样子。
你一定好奇为啥公司名都没去，因为这是家烂公司已离职，前端小伙伴千万别入坑
反正当时也没想到怎么弄，而且其他项目也紧就没来的急处理，现在是知道了其实就是文字的两端对齐，text-align:justify;。加上之后的效果如下：
完美对齐，灰常的开森😀。
01、列表布局
列表布局
这种列表布局最为常见了，里面涉及到的一个问题就是总宽是：1190px，但是根据盒子计算宽为：1120px，最后一个盒子会掉下来，所以常用的套路就是强行扩宽外加浮动布局。
关于扩宽
- 第一种办法强行给盒子增加一个宽度
需要注意的是强行增加盒子的宽度的时候，盒子宽度值必须的大于等于四个盒子的宽但小于等于五个盒子的宽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表布局</title>
<style>
*{margin: 0; padding: 0;}
section{
margin: 10px auto;
background-color: #ecf6b6;
width: 1190px;
overflow: hidden;
}
ul{
list-style: none;
/*强行增加一个宽度*/
overflow: hidden;
width: 1200px;
}
li{
float: left;
width: 290px;
height: 300px;
background-color: #64b5f6;
margin-right: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<section>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</body>
</html>
这种方法不好在于强行增加盒子的宽度，盒子的流体特性就没了。
- margin为负扩展盒子宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表布局</title>
<style>
*{margin: 0; padding: 0;}
section{
margin: 10px auto;
background-color: #ecf6b6;
width: 1190px;
overflow: hidden;
}
ul{
list-style: none;
/*margin负值扩张宽度*/
overflow: hidden;
margin-right: -10px;
}
li{
float: left;
width: 290px;
height: 300px;
background-color: #64b5f6;
margin-right: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<section>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</body>
</html>
- 当 margin 为正值的时候，盒子本身是外扩的。
- margin 负值理论
a.当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移。——动自己
b.当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。
c.负边距在普通文档流中的作用和效果(margin-bottom负值，减少高度)。其中margin-bottom还会引发折叠现象谁大听谁的。——动别人。
d.左（margin-left）和右（margin-right)的负边距对元素宽度的影响（盒子在没有设置宽度的情况下（width:auto;也看成未设宽度），margin-right:-100px;盒子content增加宽度100px, ）。
给盒子扩张宽度更加推荐第二种使用 margin 为负值来增加盒子得宽度，这样的唯一好处是，盒子有个widht:auto; ，没丧失盒子的流体特性。
关于盒子并排显示
解决了盒子宽度问题，下面就是解决盒子并排显示。
- 使用左浮动
非常的常用，但是有一个缺点：如果盒子不是一样的高，容易造成犬牙交错层次不齐的现象。为了避免这样的现象，我们一般会给盒子设定一个固定的高。例如新浪微博的话题贡献排行榜：采用的浮动，为了避免犬牙交错的现象，给盒子固定高，但是因为用户名的长度不一，所以采用了单行溢出隐藏。于是，不得已，裁掉了用户名信息。
https://s.weibo.com/weibo?q=%23BIGBANG%E4%B8%8EYG%E7%BB%AD%E7%BA%A6%23
其实浮动还有一个最大的缺点：高度塌陷的问题，也就是常提到的“清除浮动”。
- 基于display:inline-block的列表布局
inline-block属性的元素适用于inline box模型，所以，当其中的列表元素高度不一时，是不会有错位的。如果微博使用此种方法需要注意的是用户名过长，大量留白问题。
现在我们改写下列表布局由浮动布局改为行内块：主需要把float:left;改为：display: inline-block;，这时观察布局，发现：
为什么没有成功
为什么没有成功?
因为 inline-block 元素之间的换行符空格间隙问题。
解决办法很简单只要把 HTML 骨架由：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
改为：
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
这个方法是不可取的，毕竟严重影响 HTML 骨架。所以解决办法主要有以下两种：
- ul 设置
font-size:0;👉负值可以去除所有浏览器的换行符间隙
如果是单纯的图片还行，如果有图片肯定是不行的。 - ul 设置
letter-spacing: -5px;👉负值可以去除所有浏览器的换行符间隙
推荐使用。
如果此时我们想要最后一行两端对齐应该怎么办？效果图如下：
最后一行两端对齐
既然是两端对齐，我们肯定的使用：
text-align: justify; 来对齐文本，但此时最后一行是对不齐的，原因：
列表（或文字）要两端对齐的前提就是内容必须超过一行，所以，要解决最后一行元素无法两端对齐的文字其实很简单，就是在列表（或文字段）的最后创建一个高度为0的宽度100%的透明的inline-block的标签层就可以了。所以我们手动加一个 span 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表布局</title>
<style>
*{margin: 0; padding: 0;}
section{
margin: 10px auto;
background-color: #ecf6b6;
width: 1190px;
overflow: hidden;
}
ul{
list-style: none;
/*强行增加一个宽度*/
overflow: hidden;
width: 1200px;
letter-spacing: -5px;
text-align: justify;
}
li{
display: inline-block;
width: 290px;
height: 300px;
background-color: #64b5f6;
margin-right: 10px;
margin-bottom: 20px;
}
.justify_fix{
display: inline-block;
width: 100%;
height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<section>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<span class="justify_fix"></span>
</ul>
</section>
</body>
</html>
为了保持盒子的流体特性，我们可以不强制设定宽度，采用 CSS3 伪类来去掉每一行最后一个元素的 margin。改动的代码主要如下：
ul{
list-style: none;
overflow: hidden;
/*为了流体把宽度限制条件删除*/
/*width: 1200px;*/
letter-spacing: -5px;
text-align: justify;
}
li:nth-child(4n){
margin-right: 0;
}
li:last-of-type{
margin-right: 0;
}
推荐这种方法，因为 ul ，这个盒子是自适应的。当然要实现最后一行两端对齐还有flex布局和grid布局。其中使用 flex 布局的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表布局</title>
<style>
*{margin: 0; padding: 0;}
section{
margin: 10px auto;
background-color: #ecf6b6;
width: 1190px;
overflow: hidden;
}
ul{
list-style: none;
overflow: hidden;
letter-spacing: -5px;
text-align: justify;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li{
display: inline-block;
flex-shrink: 0;
width: 290px;
height: 300px;
background-color: #64b5f6;
margin-bottom: 20px;
}
</style>
</head>
<body>
<section>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</body>
</html>
思考：🤔现在问题又来了，我们想要在 flex 布局的情况下，让最后一行左对齐？
首先最后一行需要左对齐的布局更适合使用CSS grid布局实现，
