收藏
天蓬老师批改状态：合格
老师批语：
flex弹性布局是css3中的一个有效的布局方式。引入弹性盒布局模型（flex box）的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。或者说当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。
display:flex属性元素| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | flex-flow |
主轴方向与换行方式 |
| 2 | justify-content |
项目在主轴上的对齐方式 |
| 3 | align-items |
项目在交叉轴上的对齐方式 |
| 4 | align-content |
项目在多行容器中的对齐方式 |
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | flex |
项目的缩放比例与基准宽度 |
| 3 | align-self |
单个项目在交叉轴上的对齐方式 |
| 4 | order |
项目在主轴上排列顺序 |
<!DOCTYPE html><html lang="zh-CN"><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的属性</title><style>* {box-sizing: border-box;}:root {font-size: 10px;}body {font-size: 1.6rem;}.container {/* 转为flex布局 */display: flex;height: 40rem;border: 1px solid #000;}/* 项目样式 */.container > .item {width: 10rem;/* height: 15rem; */background-color: lightgreen;border: 1px solid #000;}.container {flex-flow: row nowrap;/* 项目在主轴上的对齐方式: justify-content *//* 1. 将所有项目看成一个整体来处理 */justify-content: flex-start;justify-content: flex-end;justify-content: center;/* 2. 将所有项目看成一个个独立的个体来处理 */justify-content: space-between; /* 二端对齐 */justify-content: space-around; /* 分散对齐 */justify-content: space-evenly; /* 平均对齐 */}/* 项目在交叉轴上的对齐方式: align-items */.container {align-items: stretch; //拉伸align-items: flex-start;align-items: flex-end;align-items: center;}/*justify-content: 项目在主轴上的对齐方式align-items: 项目在交叉轴上的对齐方式*/.container {flex-flow: row wrap;/* 多行容器中对齐时,主轴是没有剩余空间的 *//* 换行后,如果需要设置对方方式,就要求交叉轴上必须要有剩余空间 */align-content: stretch;/* 将交叉轴上所有项目看成一个整体 */align-content: flex-start;align-content: flex-end;align-content: center;/* 看成个体 *//* 二端对齐 */align-content: space-between;/* 分散对齐 */align-content: space-around;/* 平均对齐 */align-content: space-evenly;}</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 class="item">item5</div><div class="item">item6</div><div class="item">item7</div><div class="item">item8</div></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
