重点

记住这些代码

display: flex; 让元素变为flex容器
flex-direction: row/column; 元素流动方向是横着还是竖着
flex-wrap: wrap;自动换行
justify-content: center/space-between; 元素在主轴居中/分开 或在右边那栏的标签如

中写：
margin-left: auto;
align-items: center;在纵轴居中对齐

flex容器：display: flex

让一个元素变成flex容器
.container { display: flex/inline-flex; }

1. 容器：container
2. container一般做父元素，items一般做子元素



---

container的样式

流动方向：flex-direction

改变items流动方向（主轴）

• row：元素摆放的方向和文字方向一致（默认）
• row-reverse：元素摆放的方向和文字方向相反(如从右往左）
• column：元素从上放到下
• column-reverse：元素从下放到上



改变换行：flex-wrap

• nowrap：所有的元素都在一行（默认）
• wrap：元素自动换成多行
• wrap-reverse：元素自动换成逆序的多行(从左下开始向右）



流动方向和换行：flex-flow 前两者的合并

• flex-flow: row wrap；

  主轴对齐方式：justify-content

  默认主轴是横轴：水平对齐元素（除非改变了flex-direction方向）

• flex-start：元素和容器的左端对齐（默认）

• flex-end：元素和容器的右端对齐
• center：元素在容器里居中
• space-between：元素之间保持相等的距离
• space-around：每个元素周围的空白一样多
• evenly：元素之间的空隙一样大



纵轴对齐方式：align-items

默认次轴是纵轴

• center：元素纵向居中
• flex-end：元素与容器的底部对齐
• stretch：元素被拉伸以填满整个容器（默认）
  1. 如果不设高度会以最长内容高度统一
• flex-start：元素与容器的顶部对齐
• baseline：元素在容器的基线位置显示



多行内容：align-content

很少用到

• flex-start：多行都集中在顶部（多余行高放下面）
• flex-end：多行都集中在底部（多余行高放上面）
• center：多行居中（多余行高放两边）
• stretch; 每一行都被拉伸以填满容器
• space-between; 行与行之间保持相等距离
• space-around; 每行的周围保持相等距离



---

flex item的属性

order（改顺序）

• 默认order: 0
• 取值排列顺序：负数>0>正数



flex-grow（长胖）

控制自己如何长胖

• flex-grow: 0;默认不分
• 子元素flex-grow取值决定分配到多少
• 一般全喂给中间的展示页面，左边和右边的logo啥的默认为0



flex-shrink（变瘦）

控制如何变瘦

• flex-shrink: 1;默认（一起瘦）
• flex-shrink: 0;防止变瘦，再饿也不管我的事

• 空间不够的时候，数字越大瘦得越快

  flex-basis（控制基准宽度）

• flex-basis: auto;默认

  align-self（定制align-items）

  使某个align特立独行
  

  缩写

• flex: flex-grow flex-shrink flex-basi空格隔开

• 如：flex: 1 100 100px;

---

1-教程：CSS Tricks

2-闯关测试：Flex青蛙游戏

https://flexboxfroggy.com/#zh-cn

3-三栏布局

如何两边固定中间自适应？

1. 中间的设置flex-grow: 1;
2. 两边的不设置



4-两行布局

如何让导航栏去到右边？

方法一：在父元素上设置justify-content:space-between;
方法二：在导航栏上写margin-left: auto

5-实践

效果图：http://js.jirengu.com/tuzoj/1/edit?html,css,output
代码链接：


两栏布局（如顶部条）

1. 父元素加display: flex;

2. 一般需要加flex-wrap: nowrap;（没换行）

   三栏布局（如内容区）

3. 父元素加display: flex;

   四栏布局（如导航）

4. 父元素加display: flex;

   平均布局（产品展示区）

5. 加-margin

   6-经验

6. 永远不要把width和height写死（电脑一般写死，因为屏幕足够大，手机不写死；）

7. 用min-width / max-width / min-height / max-height
8. flex可以基本满足所有需求
9. flex和margin-xxx: auto 配合有意外的效果

写死

width: 100px

不写死

width: 50%
max-width: 100px
width: 30vw（占屏幕的30%）
min-width: 80%
特点：不使用 px，或者加 min max 前缀