收藏
天蓬老师批改状态：合格
老师批语：
图例
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;
}
}
```
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
