前端作业-flex布局

实例演示flex容器与项目中常用的属性,并写出功能
图例

HTML文件

<!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>flex-flow</title>
  <link rel="stylesheet" href="./demo11.css">
  <style>
  </style>
</head>
<body>
     <div class="container">
         <dir class="itm">元素块1</dir>
         <dir class="itm">元素块2</dir>
         <dir class="itm">元素块3</dir>
         <dir class="itm">元素块4</dir>
         <dir class="itm">元素块5</dir>
         <dir class="itm">元素块6</dir>
     </div>
</body>
</html>

CSS文件
```
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container{
display: flex;
width: 40rem;
height: 15em;
border: 1px solid #000;

/主轴变横向/
/ flex-direction: column; /
/换行显示/
/ flex-flow: row wrap; /

/剩余空间位于所有项目的左边/
/ justify-content: flex-start;
/剩余空间位于所有项目的右边/
/justify-content:flex-end;
/剩余空间位于所有项目的中边/
/* justify-content: center;
```
/*剩余空间两端对齐*/
```
/justify-content: space-between;
/剩余空间分散对齐/
/justify-content: space-around;
/剩余空间平均对齐/
/*justify-content: space-evenly;

/交叉轴对齐：交叉轴剩余空间/
/align-items: stretch;/

/*justify align-items: flex-start;
```
align-items: flex-end;
align-items:center;*/ 
```
}
.container > .itm{
height: 10em;
background-color: lightcyan;
border: 1px solid #000;
}

}

```

相关文章