css - 速子 CSS : Responsive line of buttons

Question

我的网站

我构建了一个 conference website与 Tachyons framekwork .该页面有一行按钮，这些按钮应根据页面宽度进行响应。

我的问题

按钮行在全桌面宽度和窄(<450px)宽度下看起来不错，但在 500-700px 宽范围内失败 - 按钮没有像预期的那样重新排列成两行。这在移动设备上看起来很糟糕。

全宽

500-700 像素宽

移动设备(< 450 像素)

代码

<div class="relative absolute-ns bottom--2-ns w-100 vh-20-ns bg-black-80 avenir pv3 pt0-ns mt3 mt0-ns">
    <div class="f4 f2-ns near-white avenir tc">
        <p>One Day. One Track. One Community.</p>
    </div>
    <div class="dt-ns center">
        <div class="dt-row-ns w-100 tc">

            <div class="dtc-ns pa2">
                <a href="#about">
                    <button id="cfp-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        About
                    </button>
                </a>
            </div>

            <div class="dtc-ns pa2">
                <a href="https://www.eventbrite.com/e/serverless-days-tlv-tickets-44959103890">
                    <button id="tickets-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 blue bg-near-white">
                        Register
                    </button>
                </a>
            </div>

            <div class="dtc-ns pa2">
                <a href="#speakers">
                    <button id="speakers-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        Keynotes
                    </button>
                </a>
            </div>


            <div class="dtc-ns pa2">
                <a href="#cfp">
                    <button id="cfp-button" type="button" class="f6 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        Call for Papers
                    </button>
                </a>
            </div>

            <div class="dtc-ns pa2">
                <a href="#sponsors">
                    <button id="sponsor-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        Sponsors
                    </button>
                </a>
            </div>
        </div>
    </div>
</div> 

我的问题

如何使按钮行完全响应，以便在页面变窄时将其拆分为 2 行或更多行？

Answer 1

我推荐flex box作为这里的快速解决方案!您可以从子级中删除“dtc-ns”类。

<div class="w-100 flex flex-wrap justify-center">
    <div class="pa2"></div>
    <div class="pa2"></div>
    <div class="pa2"></div>
    <div class="pa2"></div>
    <div class="pa2"></div>
</div>

从 ~576-719 像素，此 View 将显示为一行 4，底部有 1。

实现 row of 3, row of 2 的一种方法是为子级设置“中”视口(viewport)的宽度； "w-30-m" 在这种情况下效果很好。

<div class="pa2 w-30-m"></div>