两端对齐几种实现方案

---

一天，同事问我如果实现两段对齐的方式有几种呢？
我大概想了下说：有 5 种。 今天，抽空细想了下，发现不止 5 种呢！接下来一一为大家展示下。

具体效果可以看看这里
Demo

部分公共的样式

.demo,
h4 {
    width: 80%;
    margin: 0 auto 2em;
}
.demo {
    border: 1px solid red;
    padding: .5em;
}
h4 {
    margin-bottom: .5em;
}
.inner-item {
    border: 1px solid blue;
}
复制代码

1.text-align: justify

<div class="text-align-justify demo">
    <div class="inner-item">左边 div</div>
    <div class="inner-item">右边 div</div>
</div>
复制代码

/*text align justify */
.text-align-justify {
    text-align: justify;
    text-align-last: justify;
}
.text-align-justify .inner-item {
    display: inline-block;
}
复制代码

2.float

<div class="float demo">
    <div class="fl inner-item">左边 div</div>
    <div class="fr inner-item">右边 div</div>
</div>
复制代码

/* float */
.float {
    overflow: hidden;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
复制代码

3.负margin + float

<div class="negative-margin demo">
    <div class="inner-item main">中间 div</div>
    <div class="left inner-item">左边 div</div>
    <div class="right inner-item">右边 div</div>
</div>
复制代码

/* negative-margin */
.negative-margin {
    height: 10vw;
}
.negative-margin .left,
.negative-margin .right,
.negative-margin .main {
    float: left;
    box-sizing: border-box;
} 
.negative-margin .left,
.negative-margin .right {
    background-color: #fff;
    width: 20%;
}
.negative-margin .main {
    width: 100%;
    padding: 0 20%;
    background-color: #ccc;
}
.negative-margin .left {
    margin-left: -100%;
}
.negative-margin .right {
    margin-left: -20%;
}
复制代码

4.position

<div class="position pr demo">
    <div class="pa left inner-item">左边 div</div>
    <div class="pa right inner-item">右边 div</div>
</div>
复制代码

/*position*/
.pr.demo {
    height: 10vw;
}
.pr {
    position: relative;
}
.pa {
    position: absolute;
}
.pa.right {
    right: .5em;
}
复制代码

5.table

<div class="table demo">
    <div class="inner-item">左边 div</div>
    <div class="inner-item">中间</div>
    <div class="inner-item">右边 div</div>
</div>
复制代码

/* table */
.table {
    display: table;
}
.table .inner-item {
    display: table-cell;
}
复制代码

6.flex

<div class="flex demo">
    <div class="inner-item">左边 div</div>
    <div class="inner-item">右边 div</div>
</div>
复制代码

/* flex */
.flex {
    display: flex;
    justify-content: space-between;
}
复制代码

7.column

<div class="column demo">
    <div class="inner-item">左边 div</div>
    <div class="inner-item">右边 div</div>
</div>
复制代码

/* column */
.column {
    column-count: 2;
}
复制代码

8.grid

<div class="grid demo">
    <div class="inner-item">左边 div</div>
    <div class="inner-item">中间</div>
    <div class="inner-item">右边 div</div>
</div>
复制代码

/* grid */
.grid {
    display: grid;
    grid-template-columns: 20% calc(100% - 40% - 1em) 20%;
    grid-row-start: 1;
    grid-row-end: 3;
}
复制代码

总结

除了 grid 和 column 的兼容问题需要注意下，其它的几种方式基本都没什么使用障碍。

本文首发

转载于:https://juejin.im/post/5b4366f66fb9a04fdb169fc2