下定决心还是再学一遍CSS等前端知识
1. 认识Flex布局和Flex布局的由来
1.1 认识Flex box
- Flexbox翻译为弹性盒子
- 弹性盒子是一种用于按行或者按列布局元素的一维布局方法
- 元素可以膨胀以填充额外的空间，收缩以适应更小的空间
- 通畅我们使用Flexbox来进行布局的方案称之为flex布局（flex layout）
- flex布局是目前web开发中使用最多的布局方案
- flex布局（Flexible布局，弹性布局）
- 目前特别在移动端可以说已经完全普及
- 在PC端也几乎已经完全普及和使用，只有非常少数的网站依然在用浮动来布局
- 为什么需要flex布局
- 长久以来，CSS布局中唯一可靠且跨浏览器兼容的布局工具只有floats和positioning
- 但是这两种方法本身存在很大的局限性，使用他们是无奈之举
1.2 原先布局存在的痛点
- 举例
- 比如在父内容里面垂直居中一个块内容
- "44 years ago we put a man on the moon, but we still can't vertically center things in CSS." -- by Juozas Kaziukenas, 2013-07-21
- 使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用
- 使多列布局中的所有列采用相同的高度，即使他们包含的内容量不同
- 比如在父内容里面垂直居中一个块内容
1.3 Flex布局的出现
-
所以长久以来，大家非常期待一种真正可以用于对元素布局的方案：于是Flex布局出现了
- "Nature and nature's laws lay hid in night; God said "Let Newton be" and was light." -- 牛顿的墓志铭
-
如果担心其兼容性问题
- 可以在CanIuse查询具体的兼容性
2. 两个非常重要的概念
- 开启了flex布局的元素叫 flex container
- flex container里面的直接子元素叫做 flex item
2.1 container
- 设置display属性为flex或者inline-flex可以成为flex container
- flex：flex container以block-level形式存在
- inline-flex：flex container以inline-level形式存在
2.2 flex item
- 当flex container中的子元素变成了flex item的时候，具备以下特点
- flex item的布局将受flex container属性的设置来进行控制和布局
- flex item不再严格区分块级元素和行内级元素
- flex item默认情况下是包裹内容的，但是可以设置宽度和高度
3. Flex布局的模型，坐标轴，主轴和交叉轴
- main axis
- cross axis
4. Flex相关的属性
4.1 应用在flex container上的CSS属性
4.1.1 flex-flow
4.1.2 flex-direction
- 决定main axis的方向
- row 默认值
- row-reverse
- column
- column-reverse
4.1.3 flex-wrap
- nowrap: 默认，单行
- wrap: 多行
- wrap-reverse: 多行，对比wrap，cross start与 cross end相反
4.1.4 justify-content
4.1.5 align-items
4.1.6 align-content
4.1.7 flex-flow
- 是flex-direction和flex-wrap的简写属性
- 顺序随便，并且都可以省略
4.1.8 justify-content
- flex-start: 默认值，与main start 对其
- flex-end：与main end对其
- center 居中对其
- space-between:
- flex items之间的距离相等
- 与main start，main end两端对齐
- space-arount:
- flex items之间的距离相等
- flex items与main start，main end之间的距离是flex items之间距离的一半
- space-evenly:
- flex items之间的距离相等
- flex items与main start，main end之间的距离等于flex items之间距离
4.1.9 align-items
- align-items 决定了flex items在cross axis上的对齐方式
- normal: 在弹性布局中，效果和stretch一样
- stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
- flex-start: 与cross start对齐
- flex-end：与cross end对齐
- center: 居中对齐
- baseline: 与基准线对齐
4.1.10 align-content
- 决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
- stretch 默认值：与align-items的stretch类似
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
4.2 应用在flex items 上的CSS属性
4.2.1 flex-grow
- 决定了flex items如何扩展（拉伸/成长）
- 默认值是0，可以设置任意非负数字，
- 当flex container在main axis方向上有剩余 size时，flex-grow属性才会有效
- 如果所有 flex items的flex-grow总和sum 超过1，每个flex item扩展的size为
- flex container 的剩余size * flex-grow / sum
- flex items扩展后的最终size不能超过max-width/max-height
4.2.2 flex-basis
- 用来设置flex items在main axis方向上的base size
- auto 默认值
- 具体的宽度数值
- 决定flex items最终base size的因素，优先级从高到低
- max-width,max-height,min-width,min-height
- flex-basis
- width,height
- 内容本身的size
4.2.3 flex-shrink
4.2.4 order
- order越小，越排在前面
- 可以设置任意整数，默认值是0
4.2.5 align-self
- 覆盖flex container设置的align-items
- auto
4.2.6 flex
-flex是flex-grow,flex-shrink,flex-basis的简写，可以指定1个，2个或者3个值
-
单值语法：值必须为以下其中之一 -一个无单位：会被当作flex-grow
- 一个有效的宽度值：会被当作flex-basis的值
- 关键字none，auto或者initial -双值语法
- 第一个值必须为一个无单位数，并且会被当作flex-grow的值
- 第二个必须为以下之一：
- 一个无单位数：会被当作flex-shrink的值
- 一个有效的宽度值：会被当作flex-basis的值
-
三值语法
- 第一个必须无单位: flex-grow
- 第二个必须无单位: flex-shrink
- 第三个必须为一个有效的宽度值：flex-basis
-
添加span的个数是列数减2