1.理解容器和项目(container&item)
将元素变为容器
块级：display:flex
行内: display:inline-flex
2.容器的属性
1.flex-direction(主轴方向)
row 主轴x，起点在左
row-reverse 主轴x，起点在右
column 主轴y，起点在上
column-reverse 主轴y，起点在下
2.flex-wrap
当主轴排列不下所有项目时，指定项目换行
取值：1.nowrap 默认值，空间不够也不换行，项目会缩小
2.wrap 换行
3.wrap-reverse 换行反转
3.flex-flow
flex-direction和flex-wrap的缩写
取值:1.row nowrap
2 ....
4.justify-content
定义项目在主轴上的对齐方式
取值:flex-start
在主轴起点对齐
flex-end
在终点对齐
space-between
两端对齐
center
在主轴上居中对齐
space-around
每个项目间距相同
5.align-items（代表所有项目，与align-self不同）
定义项目在交叉轴上的对齐方式
flex-start
flex-end
center
baseline：交叉轴基线对齐
stretch：如果项目未设置尺寸，在交叉轴上将占满所有空间
3.项目的属性
该组的属性只能设置在某一个项目元素上，只能控制一个项目，不影响容器和其他项目效果
1.order
定义项目的破爱列顺序，值越小越靠近起点
默认值 0
取值：整数数字无单位
2.flex-grow
定义项目的放大比例，如果项目有足够的剩余空间，项目将扩大
取值：整数数字，无单位
默认为0，取值越大，占据的剩余空间越多
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ border: 1px solid #00b3ee; display: flex; } #container div{ width: 100px; height: 100px; } .d1{ background-color: yellow; flex-grow: 1; } .d2{ background-color: #1b6d85; flex-grow: 2; } .d3{ background-color: #2b542c; flex-grow: 3; } </style> </head> <body> <div id="container"> <div class="d1">item1</div> <div class="d2">item2</div> <div class="d3">item3</div> </div> </body> </html>按比例分摊剩余空间
3.flex-shrink
定义项目的缩小比例，即容器空间不足时，项目该如何缩小
取值：默认为1，空间不足时则等比缩小，
取值为0则不缩小（常用）
4.align-self(定义单个项目)
定义当前项目在交叉轴上的对齐方式
取值:
flex-start
flex-end
center
baseline
stretch 伸展对齐
auto（继承自父元素的align-items属性）
ex:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ display: flex; width:960px; height: 620px; flex-wrap: wrap; margin: 0 auto; justify-content: space-between; } #container>div{ background-color: #5e5e5e; } #container #d1{ width:610px; height: 370px; } #container #d2{ width: 340px; height: 370px; } #container #d3{ width: 360px; height: 230px; } #container #d4{ width: 190px; height: 230px; } #container #d5{ width: 190px; height: 230px; } #container #d6{ width: 190px; height: 230px; } </style> </head> <body> <div id="container"> <div id="d1">item1</div> <div id="d2">item2</div> <div id="d3">item3</div> <div id="d4">item4</div> <div id="d5">item5</div> <div id="d6">item6</div> </div> </body> </html>
