2.如何用一行Css实现10种现代布局

标签：10 center flex items 一行 place background grid Css

1. 超级居中place-items: center

 

首先指定 grid作为 display 方法，然后在同一个元素上写入 place-items: center。place-items 
是同时设置 align-items 和 justify-items 的快速方法。
通过将其设置为 center ， align-items 和 justify-items 都将设置为 center。

      .prent-center {
        display: grid;
        place-items: center;
        padding: 30px 50px;
        background: blue;
      }

<!-- 1.超级居中 --> <div class="prent-center"> <div style="background: red; width: 30px; height: 30px;"></div> </div>

2. 解构煎饼式布局：flex: <grow> <shrink> <baseWidth>

接下来我们有解构的煎饼！这是营销网站的常见布局，例如，可能有一行 3 个项目，通常带有图像、标题，然后是一些描述产品某些功能的文本。在移动设备上，我们希望它们能够很好地堆叠，并随着我们增加屏幕尺寸而扩展。
  flex: <flex-grow> <flex-shrink> <flex-basis> 。
正因为如此，如果您想让您的框填充到它们的 <flex-basis> 大小，缩小到更小的尺寸，但不拉伸以填充任何额外的空间，请写入：flex: 0 1 <flex-basis> 。在这种情况下，您的 <flex-basis> 是 150px，所以应该是这样：
      瓜分剩余空间: 如parent是1000px,1000px- 3* box的宽度就是乘余空间
      flex-grow: 如果box1 flex-grow等于1 也就是box1的宽度等于 1000px- box2 -box3,
      flex-grow默认是0,不索取剩余空间
      flex-basis: 其实是width的替代品,同时设置width时flex-basis优先级高,如果有设置auto,其它非auto的优先级高
      flex-shrink 正常是1
<style type="text/css">
    .parent {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      height: 500px;
      background: greenyellow;
      align-items: center;
      
     }
     .parent .box1 .box2 .box3 {
       flex: 0 1 150px;
       background-color: red;
       height: 100px;
       margin-right: 10px;
       margin-bottom: 10px;
     }
  </style>
  <div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

3.侧边栏布局：grid-template-columns: minmax(<min>, <max>) …)

 

 

仅供参考学习

参考文献: 微信公众号: JS每日一题

标签：10,center,flex,items,一行,place,background,grid,Css
From： https://www.cnblogs.com/TheYouth/p/16593226.html