Flexbox 布局有哪些常用属性？

Flexbox（弹性盒子布局）是一种现代的 CSS 布局方式，旨在提供更高效、更灵活的布局方法。以下是 Flexbox 布局中常用的属性：

容器属性（父元素）

display：定义容器为 Flexbox 布局。

.container {
    display: flex; /* 或 inline-flex */
}

flex-direction：定义主轴的方向。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap：定义子元素是否换行。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

justify-content：定义子元素在主轴上的对齐方式。

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items：定义子元素在交叉轴上的对齐方式。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

align-content：定义多行子元素在交叉轴上的对齐方式。

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

子元素属性（子元素）

order：定义子元素的排列顺序。

.item {
    order: <integer>; /* 默认值为 0 */
}

flex-grow：定义子元素的放大比例。

.item {
    flex-grow: <number>; /* 默认值为 0 */
}

flex-shrink：定义子元素的缩小比例。

.item {
    flex-shrink: <number>; /* 默认值为 1 */
}

flex-basis：定义子元素在分配多余空间之前的默认大小。
```
.item {
    flex-basis: <length> | auto; /* 默认值为 auto */
}
```

flex：flex-grow、flex-shrink 和 flex-basis 的简写。

.item {
    flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

align-self：定义单个子元素在交叉轴上的对齐方式，覆盖 align-items。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

示例代码

以下是一个完整的示例，展示如何使用 Flexbox 布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 示例</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 200px;
            border: 1px solid #000;
        }
        .item {
            width: 50px;
            height: 50px;
            background-color: lightblue;
            margin: 10px;
        }
        .item1 {
            flex-grow: 2;
        }
        .item2 {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

总结

容器属性：display、flex-direction、flex-wrap、justify-content、align-items、align-content
子元素属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

通过灵活使用这些属性，可以实现各种复杂的布局需求。Flexbox 布局在现代网页设计中非常常用，能够极大地简化布局代码。

Flexbox 弹性布局弹性盒子布局 CSS布局容器属性子元素属性

学在每日，进无止境！更多精彩内容请关注微信公众号。

原文出处：内容由AI生成仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。

出处地址：http://www.07sucai.com/tech/752.html

博客站