弹性布局 修改了

标签使用display: flex;
标签 为 (伸缩容器),
每个子元素为 (伸缩项目),

注意: 子元素的浮动 / vertical-align失效

父元素上

• flex-direction 项目排列方向
• flex-wrap 一条线排列不下, 如何换行
• flex-flow 是上面2个属性的复合写法
• justify-content 在主轴对齐方式
• align-items 交叉轴方向(与主轴对立那个)对齐方式
• align-content 多根交叉轴方向对齐方式(一般flex-wrap配合用), 值与justify-content相等

1. flex-direction的值:
   • row（默认值）：主轴水平方向，起点左端
   • row-reverse：主轴水平方向，起点右端
   • column：主轴垂直方向，起点上端
   • column-reverse：主轴垂直方向，起点下端
2. flex-wrap的值:
   • nowrap: 不换行
   • wrap: 换行 (第一行在上方)
   • wrap-reverse: 换行 (第一行在下方)
3. justify-content的值: (主轴)
   • flex-start: 排列方向起点对齐
   • flex-end: 排列方向终点对齐
   • center: 居中
   • space-between: 两端对齐, 元素之间有空隙
   • space-around: 项目用空隙环绕, 元素之间是端的二倍空隙
4. align-items的值:
   • flex-start：交叉轴的起点对齐
   • flex-end：交叉轴的终点对齐
   • center：交叉轴的中点对齐
   • baseline: 元素的第一行文字的基线对齐
   • stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度

子元素内

• flex 弹性元素如何伸长或缩短, 适应flex容器中的可用空间
• flex-grow 有剩余空间的时候，分配给元素的比例
• flex-shrink 空间不足的时候，元素缩小的比例, 如果给0, 则不缩小 (用的少)
• flex-basis 分配空间之前，元素占据主轴的空间, 默认值auto, 项目原本大小
• order 按照数值(默认0), 由小到大, 根据父级指定排列方向, 正向排列
• align-self 单独设置排列方式覆盖继承的, 默认继承于父级align-items

---

• flex: 复合写法: flex-grow flex-shrink flex-basis
  • 表格如下

flex 值	相当于flex-grow, flex-shrink, flex-basis 对应的值
flex: 1	flex: 1 1 0
flex: 100px	flex: 1 1 100px
flex: 默认值	flex: 0 1 auto
flex: auto	flex: 1 1 auto
flex: none	flex: 0 0 auto

• flex-grow: 有剩余空间的时候，分配给元素的比例
  • 例1: 三个flex-grow: 1(等同三个flex: 1)效果
  • 例2: 中间的flex-grow值2, 左右都为1, 效果:
  • 例3: 中间的flex的值: 2, 左右的flex值1 效果

讲解上面图片, 分配空间步骤

---

例2 图解:
flex-basis: 默认auto; 元素本身的大小
剩余的空间 = 父级宽度 - 元素本身大小 * 3(个span)
剩余空间分4份, 左右为1份, 中间的2份, 每个span还得算上原本的大小

例3 图解:
flex-basis: 看上面表格为0, 所以不考虑自身大小, 直接把父级宽度 / 4, 按值分配

• order: 按照数值(默认0), 由小到大, 根据父级指定排列方向, 正向排列

最忠诚的建议

建议优先使用flex复合写法, 会自己推断3个属性的值