css的Flex布局简介与示例_css flex布局实例-优快云博客

Flex布局（Flexible Box Layout，简称Flexbox）是CSS3中用来布局的一种新方法，它通过指定容器和子项的属性，可以灵活地控制子项在容器中的排列方式。Flex布局的核心思想是将容器分成弹性容器（flex container）和弹性项目（flex items），并通过不同的属性来控制它们的对齐、排列和伸缩。

1. 基本概念

Flex容器：包含flex子项的父容器。通过将容器的display属性设置为flex或inline-flex，就可以将该容器定义为flex容器。
Flex项目：直接包含在flex容器内的子元素，它们将会被自动调整以适应容器的布局。

2. 常用属性

容器属性

display: flex：将元素设置为flex容器。
flex-direction：定义主轴的方向（子项的排列方向）。
- row（默认）：主轴为水平方向，子项从左到右排列。
- row-reverse：主轴为水平方向，子项从右到左排列。
- column：主轴为垂直方向，子项从上到下排列。
- column-reverse：主轴为垂直方向，子项从下到上排列。
justify-content：定义子项在主轴上的对齐方式。
- flex-start（默认）：子项从主轴的起点开始。
- flex-end：子项从主轴的终点开始。
- center：子项在主轴上居中。
- space-between：子项之间的间距相等，且两端没有间距。
- space-around：子项之间的间距相等，且两端的间距为子项间距的一半。
align-items：定义子项在交叉轴上的对齐方式。
- stretch（默认）：子项拉伸以适应容器（如果未设置高度）。
- flex-start：子项在交叉轴的起点对齐。
- flex-end：子项在交叉轴的终点对齐。
- center：子项在交叉轴上居中。
- baseline：子项的基线对齐。
flex-wrap：定义子项是否换行。
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。

子项属性

order：定义子项的排列顺序，数值越小，排列越靠前，默认值为0。
flex-grow：定义子项的放大比例，默认为0（即不放大）。
flex-shrink：定义子项的缩小比例，默认为1（即可以缩小）。
flex-basis：定义子项的初始大小，可以是绝对值（如px）或相对值（如%）。
align-self：允许单个子项在交叉轴上有不同的对齐方式，覆盖align-items属性。可选值与align-items相同。

3. 示例

下面是一个简单的Flex布局示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局示例</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
        }
        .item {
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
            text-align: center;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>