jal
/
WebTest


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局</title>
  <style>
    #box {
      width: 300px;
      height: 300px;
      background: #ddd;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    #child {
      width: 300px;
      height: 100px;
      background: orange;
    }
  </style>
</head>

<body>
  <h1>弹性布局</h1>
  <pre>
    这种方式也是首先给父元素设置 display:flex; 设置好之后改变主轴的方向 flex-direction: column; 该属性可能的取值有四个，分别如下：
  
    row（该值为默认值）：主轴为水平方向，起点在左端
    row-reverse：主轴为水平方向，起点在右端
    column：主轴为垂直方向，起点在上沿
    column-reverse：主轴为垂直方向，起点在下沿

    justify-content 属性定义了项目在主轴上的对齐方式，可能的取值有五个，分别如下（具体的对齐方式与主轴的方向有关，以下假定主轴方向为默认的从左到右）：

    flex-start（该值是默认值）：左对齐
    flex-end：右对齐
    center：居中对齐
    space-between：两端对齐，各个项目之间的间隔均相等
    space-around：各个项目两侧的间隔相等

  </pre>
  <div id="box">
    <div id="child"></div>
  </div>

</body>

</html>