媒体查询及flex弹性布局 ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第5天。
一、媒体查询
min-device-width 设备宽度
min-width 浏览器宽度
- 媒体查询引入方式1 内部样式表
<style media="(min-device-width:300px) and (max-device-width:600px)">
</style>
- 媒体查询引入方式2 外部样式 link
<link
rel="stylesheet"
href="./css/媒体查询/01.css"
media="(min-device-width:500px) and (max-device-width:700px)"/>
二、flex弹性布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：
三、容器属性
1) flex-direction
用来决定主轴的方向（即项目的排列方向）
| 值 | 描述 |
|---|---|
| row | 默认值，主轴沿水平方向从左到右 |
| row-reverse | 主轴沿水平方向从右到左 |
| column | 主轴沿垂直方向从上到下 |
| column-reverse | 主轴沿垂直方向从下到上 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承此属性的值 |
2) flex-wrap
用来设置当弹性盒子的子元素（项目）超出父容器时是否换行
| 值 | 描述 |
|---|---|
| nowrap | 默认值，表示项目不会换行 |
| wrap | 表示项目会在需要时换行 |
| wrap-reverse | 表示项目会在需要时换行，但会以相反的顺序 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
3) flex-flow
属性是 flex-direction 和 flex-wrap 两个属性的简写
flex-flow: flex-direction flex-wrap;
4) justify-content
justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
| 值 | 描述 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔是相等的 |
| space-around | 每个项目两侧的间隔相等 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
5) align-items
用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
| 值 | 描述 |
|---|---|
| stretch | 默认值，项目将被拉伸以适合容器 |
| center | 项目位于容器的中央 |
| flex-start | 项目位于容器的顶部 |
| flex-end | 项目位于容器的底部 |
| baseline | 项目与容器的基线对齐 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
6) align-content
align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式
| 值 | 描述 |
|---|---|
| stretch | 默认值，将项目拉伸以占据剩余空间 |
| center | 项目在容器内居中排布 |
| flex-start | 项目在容器的顶部排列 |
| flex-end | 项目在容器的底部排列 |
| space-between | 多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部 |
| space-around | 多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承该属性的值 |
四、项目属性
1) order
用来设置项目在容器中出现的顺序，通过具体的数值来定义项目在容器中的位置
order: number;
其中 number 就是项目在容器中的位置，默认值为 0。
2) align-self
允许为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值
| 值 | 描述 |
|---|---|
| auto | 默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch” |
| stretch | 项目将被拉伸以适合容器 |
| center | 项目位于容器的中央 |
| flex-start | 项目位于容器的顶部 |
| flex-end | 项目位于容器的底部 |
| baseline | 项目与容器的基线对齐 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
3) flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写
flex: flex-grow flex-shrink flex-basis;
参数说明如下：
- flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
- flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
- flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式。
另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）。
