flex布局的基本知识和媒体查询

术语

  • 两个轴:主轴和交叉轴
  • 两条线:起始线和终止线
  • 两个主题:容器和项目
  • 一个空间:剩余空间/有效空间


  • 任何一个可视元素,添加 display:flex 后都可以专为 flex 弹性容器;
  • flex 弹性容器内的直接子元素称之为 flex 的项目,它是真正的布局对象

容器的常用属性

  • flex-wrap 规定 tlex 容器是单行或者是多行;
  • flex-direction 规定主轴方向;
  • flex-flow:row nowrap 第一个参数为主轴方向,第二个参数为是否换行;
  • justify-content(根据主轴)
  1. flex-start:所有项目从左边排列;
  2. flex-end:所有的项目从右边开始排列;
  3. center: 所有项目居中
  4. space-between:两边对齐;
  5. space-around:分散对齐;
  6. space-evenly:平均对齐;
  • align-items(根据交叉轴)
  1. stretch:拉伸
  2. flex-start:从上往下对齐
  3. flex-end:从下往上对齐
  4. center: 居中

项目的常用属性

  • flex-basis:项目在主轴上的宽度(优先级大于 width 但是小雨 min-width)

  • flex-shrink:是否收缩(0 禁制收缩;1 可以收缩)

  • flex-grow:是否放大(0 禁制;1 允许)
  • flex:0 1 auto;是否放大,是否收缩,宽度
  • align-self;该项目从交叉轴上面开始还是下面开始
  • order;项目排序
  • flex: 如果是单数字,表示的是flex-grow,如果所有项目的flex-grow属性都为1,则它们将等分剩余空间。若是比例不同则按照各自设置的比例分配剩余空间。

媒体查询

  1. /* 屏幕大于等于400px屏幕就显示红色 */
  2. @media screen and (min-width: 400px) {
  3. body {
  4. background-color: red;
  5. }
  6. }