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，则它们将等分剩余空间。若是比例不同则按照各自设置的比例分配剩余空间。
  
  

---

媒体查询

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