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

2022-08-16 22:32:52 阅读：192 来源： 互联网

标签：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;
      }

<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
来源： https://www.cnblogs.com/TheYouth/p/16593226.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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