收藏
天蓬老师批改状态：合格
老师批语：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>设置某一个项目在交叉轴上的对齐方式</title>
<style>
{
box-sizing: border-box;
}
:root {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
### 转为flex弹性布局元素
```
.container {
display: flex;
height: 20rem;
border: 1px solid #000;
/ position: relative; /
}
.container > .item {
/ width: 5em; /
background-color: lightcyan;
border: 1px solid #000;
}###例如设置第2个项目与其它项目的对齐方式不一样
.container > .item:nth-of-type(2) {
align-self: stretch;
align-self: flex-start;
align-self: flex-end;
align-self: center;
}###flex项目支持定位 定位父级
.container {
position: relative;
}
.container > .item:nth-of-type(2) {
position: absolute;
left: 3rem;
top: 3rem;
/ 通过定位,可以许多非常复杂,甚至匪夷所思的布局 */
}
```
</style>
</head>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
</body>
</html>
* {box-sizing: border-box;}:root {font-size: 10px;}body {font-size: 1.6rem;}.container {/* 转为flex弹性布局元素 */display: flex;height: 20rem;border: 1px solid #000;position: relative;}.container > .item {flex: auto;background-color: lightcyan;border: 1px solid #000;}
.container > .item:first-of-type {order: 1;order: 5;background-color: yellow;}.container > .item:nth-of-type(2) {order: 2;background-color: lightgreen;}.container > .item:nth-of-type(3) {order: 3;order: 0;}.container > .item:last-of-type {order: 4;/* 支持负值 */order: -1;background-color: #ccc;}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
