CSS Flex排版--解决垂直居中问题，两列等高问题，自适应宽问题

比眉伴天荒 2023-02-18 10:54 24阅读 0赞

CSS 三大经典问题：垂直居中问题，两列等高问题，自适应宽问题。今天用flex总结一下

垂直居中

<div id="parent">
      <div id="child">
      </div>
    </div>
    
    
    #parent {
      display:flex;
      width:300px;
      height:300px;
      outline:solid 1px;
      justify-content:center;
      align-content:center;
      align-items:center;
    }
    #child {
      width:100px;
      height:100px;
      outline:solid 1px;
    }

思路是创建一个只有一行的 flexbox，然后用 align-items:center; 和 align-content:center; 来保证行位于容器中，元素位于行中。

两列等高：

<div class="parent">
      <div class="child" style="height:300px;">
      </div>
      <div class="child">
      </div>
    </div>
    <br/>
    <div class="parent">
      <div class="child" >
      </div>
      <div class="child" style="height:300px;">
      </div>
    </div>
    
    
    
    .parent {
      display:flex;
      width:300px;
      justify-content:center;
      align-content:center;
      align-items:stretch;
    }
    .child {
      width:100px;
      outline:solid 1px;
    }

思路是创建一个只有一行的 flexbox，然后用 stretch 属性让每个元素高度都等于行高。

自适应宽：

<div class="parent">
      <div class="child1">
      </div>
      <div class="child2">
      </div>
    </div>
    
    
    .parent {
      display:flex;
      width:300px;
      height:200px;
      background-color:pink;
    }
    .child1 {
      width:100px;
      background-color:lightblue;
    }
    .child2 {
      width:100px;
      flex:1;
      outline:solid 1px;
    }

这个是 Flex 设计的基本能力了，给要自适应的元素添加 flex 属性即可