CSS 布局之flex布局CSS 布局——flex布局当你从上帝视角看待一些知识的时候，你就会发现以前遇到过的一些问题

CSS 布局——flex布局

前端 CSS 学习目录导航

1. CSS 字体属性和文本属性

2. CSS 特性、盒子模型

3. CSS 背景设置、高级元素 form表单使用

4. CSS 结构伪类以及其他前端开发知识补充

5. CSS 定位流布局——position

6. CSS 浮动流布局——float

7. CSS 弹性盒布局——flex

8. CSS 形变和动画

9. CSS HTML5拓展和 CSS函数使用

10. CSS BFC的理解

11. CSS 媒体查询

12. CSS 单位拓展、预处理器、移动端适配方案 当你从上帝视角看待一些知识的时候，你就会发现以前遇到过的一些问题就可以迎刃而解了，所以说，学习的时候，打开自己的格局

这个的话，就是我们的弹性盒模型，弹性盒模型就是一个可以随着视口的变化，产生对应的变化，这个就是我们的flex布局
- 前面我们知道了的布局的方式含有：（掌握好专业术语名词，搜素问题都更好搜素哦）
  - 标准流布局（normal flow）—— 垂直布局
  - 定位流布局（position flow）—— 层叠布局
  - 浮动流布局（float flow）—— 水平布局
  - 现在的话就开始我们的弹性盒布局（flex）了，这个的话很重要很重要，用这个来实现我们的布局，可以节省很多时间的

Flex 布局前言准备知识

认识 Flex 布局
- 在前端的设计中，我们可以想象的就是，网页中的每一个部分都是看作一个盒子的，但是以前的盒子模型是无法实现拉伸的
- 现在的这个 FlexBox 就是一种格外的盒子，弹性盒模型
  - 弹性盒模型是一种按照行或者列来实现布局的一种一维布局方案
    - 所以说我们使用flex 进行布局的时候，我们是需要指定布局的方向的
  - 这个时候元素可以实现的效果就是: 元素本身可以实现膨胀填充额外的空间，收缩以适应更下的空间
  - 使用FlexBox 进行的布局方案就是我们的flex布局 （flex layout）
- flex布局在web端实现开发的时候的最多的布局方案
  - flex布局（flexible 布局，弹性盒布局）
  - 移动端的适配性问题的解决，也是使用的flex 布局
  - 在当前的PC端的开发中，大部分就是使用的flex 布局，已经很少用我们的浮动来实现布局了

flex 布局的重要概念
- 如何实现将网页中的怕普通盒子转化为弹性盒子:
  - 方法一： display: flex，我们的flex container 是一个以 block level 形式存在的元素盒子
  - 方法二：display: inline-flex，这个时候，我们的flex container 就是以inline-block level的元素展示
- 弹性盒和弹性盒元素
  - 开启了 flex 布局的元素（盒子）叫做 flex container
  - 弹性盒里面的直接子元素就是我们的flex item, 就是我们的弹性盒的每一项
- flex container 中的 flex item 具备的特点
  - flex item 在 flex container 中的布局，是被弹性盒容器的属性进行控制和布局的
  - flex item 是不再区分块级元素和行内级元素了
  - flex item默认情况下是包裹内容的，还是可以设置高度以及宽度的
  - 但是我们的我们的flex container 还是需要严格的区分块级和行内级盒子特性的

flex 布局模型
- 前面的描述，我们就可以知道，布局的时候，需要进行布局的时候，就需要指定布局的方向
- 在实现进行我们的flex 的布局的时候，我们是含有主轴main axis和副轴cross axis的
  - 然后使用flex 实现布局的时候，默认的就是在主轴方向实现的布局，这些都是可以通过属性来控制的
  - 后面的指定方向的时候，就是来改变的是主轴的方向，然后来实现的页面的布局
- 同时我们的是可以设置主轴的尺寸main size 以及主轴的开始和结束的位置main start 和 main end
  - 同时副轴也是有这些设置的

Flex 布局`flex-container`属性设置

控制布局主轴的属性flex-direction
- 首先我们进行flex布局的时候，我们是需要先确定布局的主轴方向（main axis）的
- 可以实现设置的值含有：
  - flex-direction: row 就是我们的默认的值，就是在水平方向的布局
  - flex-direction: row-reverse 这个就是实现的是我们的在主轴水平方向上的反转布局
  - flex-direction: column 这个就是实现的是主轴方向就是我们的在列进行布局的
  - flex-direction: column-reverse 这个就是实现的是在列的方向上实现反转的布局设置
控制flex布局的显示行数flex-wrap
- 注意的是我们的flex布局的时候，出现的效果就是放不下的时候，就会导致后面的压缩在一行显示，同时还是可以通过设置多行显示不出现压缩，直接保留最终的盒子具备的宽度进行在网页中的显示
- 可以实现设置的值含有：
  - flex-wrap: nowrap 默认值，没有换行
  - flex-wrap: wrap 可以实现多行显示
  - flex-wrap: wrap-reverse 多行的逆方向显示

上面两个属性的简写属性flex-flow
- 这个属性就是flex-direction 和 flex-wrap 的一种简写属性
- 书写的顺序是任意的，还是省略的，随便写就行了
- 可以实现设置的值就是上面的那些值: 一共有 4*3=12种写法
justify-content属性的设置
- 这个就是实现的是对我们的内容做调整，就是flex盒子中的元素的对齐方式
- 需要注意的是，flex item 里面的布局还是通过的是我们的标准流进行的布局
- 可以实现设置的值含有:（下面的值我也记不住，都是慢慢调的，呜呜呜！！！）
  - justify-content: flex-start 默认值，就是沿着主轴方向（main start）实现依次的摆放
  - justify-content: flex-end 就是沿着主轴方向实现摆放（main end）
  - justify-content: center 就是实现的是居中对齐
  - justify-content: space-between 每一个的flex-item 之间的间距是相等的，但是实现的是两端对齐
  - justify-content: space-around 每一个flex item 之间的距离相等，和两端的间距是这个距离的一半
  - justify-content: space-evenly 全部的间距都相等（这个我喜欢使用）
align-items
- 这个属性就是来实现设置了flex items 在副轴（cross axis）上面的单行对齐方式
- 可以实现设置的值含有：
  - align-items: normal 在弹性盒中和stretch 就是一样的，但是是当我们的fledx items的高度是auto 的
  - align-items: stretch 在副轴上面的高度是自动的，自动实现拉伸填充满盒子
  - align-items: flex-start 和cross start 实现对齐
  - align-items: flex-end 和cross end 实现对齐
  - align-items: center 实现居中对齐，开发中常设置的就是这个属性值
  - align-items: baseline 实现和基准线实现对齐，通过设置字体大小，就可以改变元素的基线位置
align-content
- 就是实现的是控制flex布局中的控制多行flex items在副轴方向（cross items）的对齐方式,
- 和justify-content 的用法是一样的，属性值设置也是一样的，但是实现的排布的话是cross axis上的