【用flex如何实现响应式布局 _响应式 _flex 】

用flex如何实现响应式布局

我也踩过这个坑( 2 )

已统计您的踩坑,无需重复点击

回答(2)

响应式 flex

详细描述

截图

代码

<p class="blogroll-p">友情链接</p>
            <div  class="blogroll-link">
                <ul class="link">
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                </ul>
            </div>
            <div  class="blogroll-link">
                <ul class="link">
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                </ul>
            </div>




.link{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.blogroll-p{
    line-height: 25px;
    text-align: center;
    font-size: 16px;
    color: #333333;
}
ul{
    text-align:left;
    padding-left: 20px;
    color:#999999;
}
li{
    flex: 1;
    justify-items: start;
}

编辑于2024-04-18

时间排序

热门排序

[深圳|结业弟子]JS-黄麒二
0

给每条li设置一个固定宽度，然后使用flex-wrap就可以了

查看全部>

编辑于2018-08-24
[成都|荣耀师兄]JS-李文龙
0

通过媒体查询在不同分辨率下设置每个li的宽度，比如说大屏时10%，中屏时20%，小屏时50%，就能实现响应式了，还有就是flex-wrap属性了

查看全部>

编辑于2018-11-30

去第页