"快速上手flex布局高清指南" 资源-CSDN下载

需积分: 49 161 浏览量 2019-05-08 14:32:30 上传评论 1 收藏 3.29MB PDF 举报

### Flex布局基础知识点 #### Flex布局介绍 Flex布局，全称CSS Flexible Box Layout Module，简称Flexbox，是CSS3中一种新的布局模式。这种布局模式专门用于更高效地对齐、分布和排序容器中的项目，即使它们的大小未知或是动态变化的。Flexbox的目的是提供一种更加有效的方式来布置、对齐和分配容器内的项目空间，无论它们的大小如何，即使在有限的空间内。 #### Flex容器和项目在Flex布局中，采用Flex布局的元素被称为Flex容器，其所有子元素则自动成为容器成员，被称为Flex项目。容器可以指定子项目沿主轴（main axis）或交叉轴（cross axis）的方向排列。 #### Flexbox属性 - **display**: 使一个元素成为一个flex容器，设置`display: flex`或者`display: inline-flex`，后者在内联元素上表现相同但呈现为内联块级元素。 - **flex-direction**: 定义了主轴的方向（项目的排列方向）。 - `row`（默认值）：主轴为水平方向，起点在左端。 - `row-reverse`：主轴为水平方向，起点在右端。 - `column`：主轴为垂直方向，起点在上沿。 - `column-reverse`：主轴为垂直方向，起点在下沿。 - **flex-wrap**: 指定flex项目是否应该换行，以及换行的方向。 - `nowrap`（默认值）：不换行。 - `wrap`：换行，第一行在上方。 - `wrap-reverse`：换行，第一行在下方。 - **flex-flow**: 是flex-direction属性和flex-wrap属性的简写形式。 - **justify-content**: 定义了项目在主轴上的对齐方式。 - `flex-start`（默认值）：项目位于容器的起始端。 - `flex-end`：项目位于容器的结束端。 - `center`：项目位于容器的中心。 - `space-between`：项目两端对齐，项目之间的间隔都相等。 - `space-around`：每个项目两侧的间隔相等。 - **align-items**: 定义项目在交叉轴上如何对齐。 - `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 - `flex-start`：交叉轴的起点对齐。 - `flex-end`：交叉轴的终点对齐。 - `center`：交叉轴的中点对齐。 - `baseline`：项目的第一行文字的基线对齐。 - **align-content**: 多根轴线的对齐方式。 - `stretch`（默认值）：轴线占满整个交叉轴。 - `flex-start`：与交叉轴的起点对齐。 - `flex-end`：与交叉轴的终点对齐。 - `center`：与交叉轴的中点对齐。 - `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。 - `space-around`：每根轴线两侧的间隔都相等。 - **order**: 定义项目的排列顺序，数值越小，排列越靠前，默认为0。 - **flex-grow**: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 - **flex-shrink**: 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 - **flex-basis**: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。默认值为auto，即项目的本来大小。 - **flex**: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。 - **align-self**: 允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性。 #### Flex布局使用方法 - 为了使用Flexbox，需要在容器元素上设置`display: flex`或`display: inline-flex`。这会使得容器内的子元素成为flex项目。 - Flex项目可以使用上述列出的flexbox相关属性来进一步控制布局和对齐方式。 - Flex布局的兼容性很好，主流浏览器大多支持，但某些旧版本的浏览器需要添加特定的前缀，如`-webkit-`。 #### CSS盒子模型 - CSS盒子模型是CSS布局的基础，每个元素被视为一个矩形盒子。 - 每个盒子具有四部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。 - 内容区域位于盒子的中心，周围是内边距，紧接着是边框，外边距则是盒子与其他元素之间的距离。 #### 样式表的引入方法 - **内联样式**：直接在HTML元素的style属性中定义。 - **内部样式表**：在HTML文档的`<head>`部分的`<style>`标签内定义。 - **外部样式表**：将样式定义在一个外部的.css文件中，并通过HTML的`<link>`标签引入。 #### 浏览器兼容性 - Flexbox布局的浏览器兼容性已经很广泛，支持大多数现代浏览器，包括Chrome（29+），Firefox（28+），Internet Explorer（11+），Opera（17+），Safari（6.1+），并且对于移动端如Android（4.4+）和iOS（7.1+）也有良好支持。了解和掌握Flex布局技术，对于进行响应式网页设计、高效地布局页面元素、优化不同屏幕和分辨率下的页面展示非常有帮助。Flexbox通过简化对齐、分布和排序操作，大大提高了布局的灵活性和控制力。

资源推荐

资源详情

资源评论