flex 两端对齐_【CSS】flex布局平分三等分中间间距相等且两端对齐

作者：从前慢现在也慢 | 2024-03-15 14:52:21

踩

display: flex三等分当有两个元素的时候也是正常排列

思路：

通过display:flex,再将子元素设置flex:1,再包一层，通过设置padding来设置中间间距，可以达到想要多效果

padding-right(第1个盒子):padding-left(第2个盒子):padding-right(第2个盒子):padding-left(第3个盒子)=2:1:1:2

完整代码如下：


<!doctype html>
 
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
    <style>
      .container{
        width: 500px;
        margin: 50px auto;
      }
 
      .container *{
        box-shadow: 0 0 1px #ccc;

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/241972