CSS Flexbox 弹性布局的基本使用

CSS Flexbox 弹性布局的基本使用

CSS 的 Flexbox 是一种常用的网页布局方式，可以轻松实现元素水平排列、居中对齐和自适应布局。

创建弹性布局

使用 display: flex 可以让子元素横向排列：

.container {
    display: flex;
    gap: 10px;
}

其中 gap 用于设置元素之间的间距。

水平居中

使用 justify-content 可以控制元素在主轴上的排列方式：

.container {
    display: flex;
    justify-content: center;
}

这样可以让子元素在水平方向居中。

水平垂直居中

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

这段代码可以让容器中的子元素同时实现水平和垂直居中。

自动分配空间

.item {
    flex: 1;
}

当多个子元素都设置 flex: 1 时，它们通常会平均分配容器中的可用空间。

Flexbox 非常适合导航栏、按钮组、卡片排列和页面组件布局，是现代前端开发中最常用的 CSS 布局技术之一。