1.flex术语
1.1 flex容器
<!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>Document</title><style>.demo {display: flex;width: 40rem;height:20rem ;background-color: rgb(209, 251, 143);}.demo > .item {width: 8rem;height: 15rem;background-color: rgb(153, 195, 230);border: 0.1rem solid black;margin-left: 0.1rem;text-align: center;line-height: 15rem;}</style></head><body><div class="demo"><div class="item">01</div><div class="item">02</div><div class="item">03</div><div class="item">04</div></div></body></html>
代码运行效果如下：
" class="reference-link">
1.2flex容器子元素交叉轴和主轴排列方法
<!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>Document</title><style>.demo {display: flex;width: 40rem;height:20rem ;background-color: rgb(209, 251, 143);place-content: space-between; /*两端对齐 （掌握）*/place-content: space-around; /*分散对齐（掌握）*/place-content: space-evenly; /*平均对齐 （掌握）*//* 交叉轴 *//* place-items: stretch; *//* place-items: start; */place-items: center;/* place-items: end; */}.demo > .item {width: 8rem;height: 15rem;background-color: rgb(153, 195, 230);border: 0.1rem solid black;margin-left: 0.1rem;text-align: center;line-height: 15rem;}</style></head><body><div class="demo"><div class="item">01</div><div class="item">02</div><div class="item">03</div><div class="item">04</div></div></body></html>
