一、Flex布局

1. flex之前的布局方式

  • Nоrmаl flоw (正常流,也叫文档流)
  • float + clear
  • position relative + absolute
  • display inline-block
  • 负 margin

2. flex布局简单概括

5cf50b86025af51504.png

  1. 块级布局侧重垂直方向、行内布局侧重水平方向,flex 布局是与方向无关的
  2. flex布局可以实现空间自动分配、自动对齐(flexible:弹性、灵活)
  3. flex适用于简单的线性布局,更复杂的布局要交给grid布局(还没发布)

3. flex Container属性记忆点

  1. flex-direction 方向:
    • row 行排列(默认)
    • column 列排列
    • 以上两个属性加-reverse则为相反方向排列
  2. flex-wrap 换行
    • nowrap 默认是不换行
    • wrap 换行
  3. flex-flow 是上面两个属性的简写,如flex-flow:row wrap;
  4. justify-content 主轴对齐方式
    • space-between 两端对齐
    • space-around 空间放在周围
    • flex-start 起点对齐
    • flex-end 终点对齐
    • center 居中
  5. align-items 侧轴对齐方式
    • stretch 默认值,伸展到最大高度
    • flex-start 起点对齐
    • flex-end 终点对齐
    • center 居中
    • baseline 基于元素的第一行文字的基线对齐
  6. align-content 属性定义了多根轴线的对齐方式,用于多行/列内容对齐方式(用的比较少),一张图解释:
    5cf51275e4b2e21260.png

4. flex item属性记忆点

  1. flex-grow 增长比例(空间过多时)
  2. flex-shrink 收缩比例(空间不够时)
  3. flex-basis默认大小,属性值是固定值,如px
  4. flex上面三个的缩写
  5. order顺序(代替双飞翼)
  6. align-self自身的对齐方式,相对容器的align-items设置的属性可以给单个item元素设置侧轴对齐方式

5. 参考文章

Flex 布局教程:语法篇

二、Float布局

1.实现要点

  • 给子元素加float: left/right;
  • 给父元素加clearfix:
/* IE 8 + */
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
/* IE 6 + */
.clearfix {
    zoom: 1;
}

2. 布局套路

  • 需要做平均布局的时候,可以给元素包裹一个父元素,并给左右负margin,每个元素给浮动且给左右margin,可以适用于flex布局和float布局
  • 不写死宽度可以利用百分比和calc加减乘除来做间隙平均布局,如:width: calc(25% - 8px)
  • 尽量不要在布局元素上加样式,尽量区分

三、Grid布局

TODO...