lovecoding
/
VIP28


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #div1 {
      height: 500px;
      background: black;
      display: flex;
    }

    #div2 {
      width: 200px;
      height: 200px;
      background: red;
    }

    #div3 {
      height: 200px;
      background: blue;
      flex: 1;
      /* 占据剩余空间的一份 */
    }

    #div4 {
      height: 200px;
      background: orange;
      flex: 2;
    }
  </style>
</head>

<body>
  <div id="div1">
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
  </div>
  <!-- 
    display: flex  父元素设置

    flex-direction  决定主轴的方向
      row(默认值): 主轴是水平方向,起点在左侧
      row-reverse: 主轴是水平方向，起点在右侧
      column: 主轴为垂直方向，起点在上方
      column-reverse: 主轴是垂直方向，起点在下方

    flex-wrap 是否应该对 flex 项目换行
      nowrap(默认值) 规定将不对 flex 项目换行 
      wrap  换行，第一行在上方
      wrap-reverse 换行，第一行在下方

    justify-content 对齐 flex 项目
      flex-start: 左对齐(默认值)
      flex-end: 右对齐
      center: 居中
      space-between: 两端对齐，项目之间的间隔相等
      space-around: 每个项目环绕的距离相等

    align-items 用于垂直对齐 flex 项目
      flex-start: 上对齐
      flex-end: 下对齐
      center: 居中
      stretch 值拉伸 flex 项目以填充容器（默认）
      baseline 值使 flex 项目基线对齐

    align-content 属性用于对齐弹性线
      space-between 值显示的弹性线之间有相等的间距
      stretch 值拉伸弹性线以占据剩余空间（默认）
      center 值在容器中间显示弹性线
      flex-start 值在容器开头显示弹性线
      flex-end 值在容器的末尾显示弹性线


  -->
</body>

</html>