flex盒模型
转换为盒模型 display:flex
- 转换为盒模型后,子元素都转换为行内块元素
- flex只有两级,父级和子级
排列方向 flex-direction
- row : 表示水平排列
- column : 表示垂直排列
换行 flex-wrap
- nowrap : 不换行(默认)
- wrap : 换行
flex-flow 上面两个的简写,第一个值是方向,第二值是换行
主轴对齐方式 justify-content
- flex-start : 左对齐(默认)
- flex-end : 右对齐
- center : 居中
分配主轴上的剩余空间 justify-content
- space-between : 将剩余的空间在中间分配(首尾没有)
- space-around : 将剩余空间在所有的元素间平分,中间的空间是首尾的2倍
- space-evenly : 将剩余空间在所有的元素间平分,但是所有元素的空间都相等
交叉轴的对齐方式(单行) align-items
- flex-start : 顶部对齐(默认)
- flex-end : 底部对齐
- center : 中间对齐
分配交叉轴上的剩余空间(多行) align-content
- space-between : 将剩余的空间在中间分配(首尾没有)
- space-around : 将剩余空间在所有的元素间平分,中间的空间是首尾的2倍
- space-evenly : 将剩余空间在所有的元素间平分,但是所有元素的空间都相等
代码演示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } .container { width: 600px; height: 300px; border: 1px solid red; /*转换为盒模型*/ display: flex; /*换行显示*/ flex-wrap: wrap; /*水平排列*/ flex-direction: row; /*将主轴剩余空间平均分配,所有元素的空间都相等*/ justify-content: space-evenly; /*交叉轴上的排列方式(单行)*/ /*align-items: center;*/ /*多行*/ align-content: flex-start; } .item { width: 100px; height: 100px; border: 1px solid purple; } </style></head><body> <div class="container"> <span class="item">1</span> <span class="item">2</span> <span class="item">3</span> <span class="item">4</span> <span class="item">5</span> <span class="item">6</span> </div></body></html>
手写笔记
- 总结回顾:上节课的作业中,其中布局大的还可以,但是,在细小地方还存在混乱,不够清晰,在编写CSS的时候,条理尤为不清晰,浮动和定位功能在有些地方乱用,事先没有考虑好到底用哪种方法,太多重复的代码
