type
status
date
slug
summary
tags
category
icon
password
📝 介绍
弹性布局（Flexbox）是一种 CSS3 中的布局模型，旨在提供更加灵活和高效的方式来排列、对齐和分配空间，特别适用于构建复杂且动态的布局结构。Flexbox 提供了一套用于布局的属性和值，使得元素能够在容器中按照指定的方向排列，并且可以根据需要调整大小、对齐和分配剩余空间。
以下是弹性布局的主要特点和使用方法：
- 容器和项目：
- 在弹性布局中，父元素被称为“容器”（flex container），其子元素被称为“项目”（flex item）。
- 容器的
display属性设置为flex或inline-flex，以启用弹性布局。
- 主轴和交叉轴：
- 弹性布局中存在主轴（main axis）和交叉轴（cross axis），它们根据容器的方向确定。
- 主轴是排列方向，可以是水平方向（水平主轴）或垂直方向（垂直主轴）；交叉轴则是与主轴垂直的轴线。
- 弹性容器的属性：
flex-direction：指定主轴的方向，可选值包括row（水平方向）、row-reverse、column（垂直方向）和column-reverse。justify-content：定义项目在主轴上的对齐方式，包括flex-start、flex-end、center、space-between、space-around等。align-items：定义项目在交叉轴上的对齐方式，包括flex-start、flex-end、center、baseline、stretch等。align-content：定义多行项目在交叉轴上的对齐方式，包括flex-start、flex-end、center、space-between、space-around、stretch等。
- 弹性项目的属性：
flex-grow：定义项目的放大比例，决定剩余空间的分配情况。flex-shrink：定义项目的收缩比例，当空间不足时，项目按照比例缩小。flex-basis：定义项目在未分配空间之前的初始大小。flex：是flex-grow、flex-shrink和flex-basis的简写形式。order：定义项目的排列顺序，数值越小越靠前。
🤗 总结归纳
弹性布局的特点包括灵活性、自适应性和简洁性，可以轻松实现多种布局效果，如水平居中、垂直居中、等高布局、等宽布局等。弹性布局也适用于响应式设计，能够适应不同尺寸的屏幕和设备。因此，在网页布局中，使用弹性布局能够带来更好的开发体验和更优雅的布局效果。
📎 参考文章
- Author:GDYG
- URL:https://gdyg5.top/article/css-flex
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!