掌握flex布局：属性详解与实践应用-优快云博客

本文链接：https://blog.youkuaiyun.com/ProGrammerXu/article/details/120187918

本文详细解读flex布局的六个核心属性——flex-direction、flex-wrap、justify-content、align-items、align-content，以及行内元素、块级元素和空元素的区别，助您快速上手CSS3弹性盒布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex布局

通过 display:flex来实现flex布局

那么常用的属性值有哪些呢？

容器的属性

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

它可能有4个值。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性

align-items属性定义项目在交叉轴上如何对齐。

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

行内元素有哪些？块级元素有哪些？空元素有那些？

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

行内元素有：span a b i img input select strong
块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…
空元素(没有内容)： <br> <hr> <img> <input> <link>

简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

link与@import区别

区别：

1.link属于html标签。@import在css中使用表示导入外部样式表；
2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3.import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
4.link方式的样式的权重高于@import的权重；
5.link 支持使用javascript改变样式（document.styleSheets），后者不可

H5和css3新特性

css3新特性
选择器 ( 基本选择器层级选择器内容选择器过滤选择器属性过滤选择器子元素过滤选择器表单属性过滤选择器 )

背景和边框 ( background-size， border-radius，box-shadow ）
文本效果
2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)

h5新增特性：
1. 语义化标签：header、footer、section（赛可婶）、nav、aside、article（阿特污）
2. 增强型表单：input 的多个 type (email date color search)
3. 新增表单属性：placehoder、required、min 和 max
4. 音频视频：audio、video
5. 本地存储