zoukankan      html  css  js  c++  java
  • 解决flex布局中 space-between方法的排版问题

    flex布局中 justify-content: space-between方法的排版问题

    flex给我们的布局带来了很大的方便 ,但有时候也会碰到一些问题,比如space-between最后一行元素的排列问题

    问题:假如我们有8个元素

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    </ul>
    <style>
    ul {
    300px;
    height: 400px;
    background: #f0f0f0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px;
    }
    ul li {
    90px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: pink;
    border-radius: 10px;
    }
    </style>

    由于space-between就是两端布局,当最后一行不满三个的时候,最后一排会分在两端。

    解决方案:使用after伪元素来解决该布局bug

    ul:after{
    content: '';
    90px;
    }

    漫思
  • 相关阅读:
    第七次
    第六次作业
    第五次作业
    第四次作业
    百度网盘生成二维码api
    【css3】--四种气泡
    纯CSS气泡框实现方法探究
    三种带箭头提示框总结实例
    纯CSS实现气泡框
    Windows 上 GitHub Desktop 的操作
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/14966719.html
Copyright © 2011-2022 走看看