web前端之不一样的居中方式、解决tabBar选项卡居中问题、css支持嵌套、auto

---

前言

这里不能使用justify-content: center;，因为在小屏幕上，这种方式无法显示最前面的两个tabBar。

---

html

<div id="box" class="d_f o_a mt_50 mb_50 ml_20 mr_20">
    <div class="ws_n">tabBar 1div>
    <div class="ws_n ml_20">tabBar 2div>
    <div class="ws_n ml_20">tabBar 3div>
    <div class="ws_n ml_20">tabBar 4div>
    <div class="ws_n ml_20">tabBar 5div>
    <div class="ws_n ml_20">tabBar 6div>
    <div class="ws_n ml_20">tabBar 7div>
    <div class="ws_n ml_20">tabBar 8div>
    <div class="ws_n ml_20">tabBar 9div>
div>

---

style

#box {
    & :first-child {
        margin-left: auto;
    }

    & :last-child {
        margin-right: auto;
    }
}

---

效果

---