對(duì)于被面試的人，如果習(xí)慣了一手flex布局闖天下，本篇文章將幫您回憶基礎(chǔ)
對(duì)于面試的人，可以開闊思路，提示要點(diǎn)，直奔主題，避免背誦式的問答
示例代碼是react、CSS Module

描述的時(shí)候可以按照父元素...，子元素...，能否適用于不固定高度和寬度，是否適用于普通的文本元素以及多行，多個(gè)元素怎樣的思路，優(yōu)先級(jí)從上至下依次降低。

flex布局

適用于不固定高度和寬度，多個(gè)元素將并排顯示，適用于普通的文本元素以及多行

        <div className={SelfStyle.flexLayout}>
          <div className={SelfStyle.child1}>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Aliquid necessitatibus quae animi dolores consectetur
          </div>
          <div className={SelfStyle.child2}></div>
        </div>

  .flexLayout {
    display: flex;

    border: 1px solid #000;

    justify-content: center;
    align-items: center;

    .child1 {
      width: 100px;

      border: 1px solid #000;
    }

    .child2 {
      width: 100px;
      height: 400px;

      border: 1px solid red;
    }
  }

align-content:center 在出現(xiàn)多行時(shí)，行于行之間不會(huì)出現(xiàn)間隙 演示地址

position:absolute + transform: translate(-50%, -50%);
適用于不固定高度和寬度，多個(gè)水平垂直的子元素將重疊，脫離了普通文檔流，在文檔中的位置不存在，注意于flex實(shí)現(xiàn)的區(qū)別，一個(gè)在父元素統(tǒng)一設(shè)定，一個(gè)是子元素自己設(shè)定，這決定了使用場(chǎng)景

        <div className={SelfStyle.positionWrap}>
          <div className={SelfStyle.child1}>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Aliquid necessitatibus quae animi dolores consectetur
          </div>
          <div>123</div>
        </div>

  .positionWrap {
    position: relative;

    height: 500px;

    border: 1px solid #000;

    .child1 {
      position: absolute;
      top: 50%;
      left: 50%;

      transform: translate(-50%, -50%);

      border: 1px solid #000;
    }
  }

用margin-left和margin-top代替transform: translate(-50%, -50%);會(huì)怎樣
只適用于固定高度和寬度的元素，需要自己計(jì)算
translate 是根據(jù)元素自身的寬高計(jì)算的
如果元素應(yīng)用了rotate(180deg)，對(duì)translate(-50%, -50%)有什么影響呢

這時(shí)候Y軸方向發(fā)生了變化，需要改成translate(-50%, 50%)

line-height、text-align、 vertical-align這些，場(chǎng)景比較多
依據(jù)CSS盒模型，通過padding、margin 實(shí)現(xiàn)

position: absolute; + margin: auto;
如果不固定寬高將會(huì)充滿容器，可以設(shè)置width和height，也可以設(shè)置top、left、right、 bottom，脫離了普通文檔流，多個(gè)水平垂直居中的元素會(huì)重疊

        <div className={SelfStyle.positionWrap}>
          <div className={SelfStyle.child1}>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Aliquid necessitatibus quae animi dolores consectetur
          </div>
        </div>

  .positionWrap {
    position: relative;

    height: 500px;

    border: 1px solid #000;

    .child1 {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      width: 100px;
      height: 200px;
      margin: auto;

      border: 1px solid #000;
    }
  }

table布局
需要專門增加一層做單元格，適用于不定寬度和高度，垂直方向不限制子元素個(gè)數(shù)，適用于文本元素及多行

會(huì)撐大table容器，設(shè)置寬高無(wú)效

        <div className={SelfStyle.tableLayout}>
          <div className={SelfStyle.subWrap}>
            Lorem ipsum dolor sit
            <div style={{ width: 200 }} className={SelfStyle.child1}>
              Lorem ipsum dolor sit
            </div>
            <div className={SelfStyle.child1}>
              Lorem ipsum dolor sit
            </div>
            <div className={SelfStyle.child1}>
              Lorem ipsum dolor sit
            </div>
          </div>
        </div>

  .tableLayout {
    display: table;

    width: 400px;
    max-width: 500px;
    height: 200px;
    max-height: 10px;

    text-align: center;

    border: 1px solid #000;

    .subWrap {
      display: table-cell;

      vertical-align: middle;
    }

    .child1 {
      // width: 300px;
      margin: auto;

      border: 1px solid #000;
    }
  }

本文將持續(xù)更新

關(guān)注專題 前端便利店 http://www.itdecent.cn/c/c3f77a86d9a5 ，幫您省時(shí)省力!