zoukankan      html  css  js  c++  java
  • flex下的多行对齐与预处理器中使用nth-child选择器

    发现了之前忽略的小问题,做个笔记。

    需求如图 :
    非ui,见谅

    如图: 灰盒A是一个width100%box,红盒需要中间靠拢并留有固定间距,橙盒需上下居中(红盒子高度一致,橙盒高度一致)

    这个是一个经典的flex布局,代码如下 :

        <div class="conBox">
          <div class="item" v-for="(item,index) in list" :key="index">
            <div>{{item.name}}</div>
            <div>{{item.n2}}</div>
          </div>
        </div>
    
    .conBox {
       100%;
      height: 170px;
      margin-top: 88px;
      border: 1px solid red;
      display: flex;
      justify-content: center;
      //------------------------------//
      .item {
        border: 1px solid blue;
         170px;
        height: 170px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    //less-后代选择器
        &:nth-child(1),
        &:nth-child(2) { // less后代选择器应该这样写,&表示自身
          background: red;
          margin-right: 20px;
        }
        
      }
    }
    

    ui的需求是红盒左右间距是10pt,所以后来我写的是第一个,第二个红盒子的右边距是20px(1:2换算),但是后来再仔细看时发现不对,会导致红盒整体向右偏移,应当是每个红盒的左右间距是10px,这样才是20px。因而修改后的代码:

    .conBox {
       100%;
      height: 170px;
      margin-top: 88px;
      border: 1px solid red;
      display: flex;
      justify-content: center;
      //------------------------------//
      .item {
        border: 1px solid blue;
         170px;
        height: 170px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin:0 1.33vw; //换算后的单位    
      }
    }
    

    做个笔记

    作者:致爱丽丝
    本文版权归作者和博客园共有,欢迎转载,但必须在文章页面给出原文链接并标名原文作者,否则保留追究法律责任的权利。
  • 相关阅读:
    7.1MongoDB之索引
    7.1MongoDB之排序
    6.30MongoDB之Limit与Skip方法
    6.30Java连接MongoDB进行操作练习
    6.30MongoDB之$type操作符
    6.30MongoDB之条件操作符
    6.30MongoDB之"查"
    6.29MongoDB之"改"
    c# 调用jar包
    sql server SQL 调试:无法启动 T-SQL 调试。未能附加到 SQL Server 进程
  • 原文地址:https://www.cnblogs.com/hjk1124/p/14840946.html
Copyright © 2011-2022 走看看