Flex 布局

01 Flex 布局简介

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性任何一个容器都可以指定为 Flex 布局.
设为 Flex 布局以后,子元素的 floatclearvertical-align 属性将失效.

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称容器。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称项目
项目只能是容器的顶层子元素,不包含项目的子元素。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。

  • 主轴的开始位置(与边框的交叉点)叫做 main start, 结束位置叫做 main end.
  • 交叉轴的开始位置叫做 cross start, 结束位置叫做 cross end.

项目默认沿主轴排列.

单个项目占据的主轴空间叫做 main size, 占据的交叉轴空间叫做 cross size

示意图如下:
flex布局示意图

02 父元素/容器属性

2.1 flex-direction

该属性决定主轴的方向(即项目的排列方向)

属性值说明
row[default]主轴为水平方向,起点在左端
row-reverse主轴为水平方向,起点在右端
column主轴为垂直方向,起点在上沿
clumn-reverse主轴为垂直方向,起点在下沿

2.2 flex-wrap

该属性定义,如果一条轴线排不下,如何换行

属性值说明
nowrap[default]不换行
wrap换行
wrap-reverse换行,第一行在下方

2.3 flex-flow

该属性使 flex-direction 和 flex-wrap 属性的简写形式,默认row wrap

2.4 justify-content

该属性定义了项目在主轴上的对齐方式

属性值说明
flex-start[default]左对齐
flex-end右对齐
center居中
space-around每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
space-between均匀排列每个元素,首个元素放置于起点末尾元素放置于终点(3个项目会有2个间隔)
space-evenly均匀排列每个元素,每个元素之间的间隔相等(3个项目会有4个间隙)

2.5 align-items

该属性定义项目在交叉轴上如何对齐

属性值说明
flex-start交叉轴的起点对齐
flex-end交叉轴的终点对齐
center交叉轴的中点对齐
baseline项目的第一行文字的基线对齐
stretch如果项目未设置高度或设为auto,将占满整个容器的高度

2.6 align-content

该属性定义了多根轴线的对齐方式
设置该属性的时候必须保证主轴有足够的项目且可以换行
如果项目只有一根轴线,该属性不起作用

属性值说明
flex-start与交叉轴的起点对齐
flex-end与交叉轴的终点对齐
center与交叉轴的中点对齐
space-between与交叉轴两端对齐,轴线之间的间隔平均分布
space-around每根轴线两侧的间隔都相等; 所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch[default]轴线占满整个交叉轴(子元素侧轴方向评分父元素的侧轴大小)

03 子元素/项目属性

3.1 order

该属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。

3.2 flex-grow

该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

如果容器的宽度为1000px, 而两个项目 A, B 的宽度都是200px, 那么剩余的空白区域宽度是600px;

  • A 的 flex-grow 属性值为1, B 的 flex-grow 属性值为 0
    A 将占有所有的剩余宽度宽度变成 200px + 600px;
  • A 的 flex-grow 属性值为1, B 的 flex-grow 属性值为2,
    A 将占有所有剩余宽度宽度的1/3变成 200px + 600px / 3 * 1
    B 将占有所有剩余宽度宽度的2/3变成 200px + 600px / 3 * 2

3.3 flex-shrink

该属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
如果所有项目的 flex-shrink 属性都为1,当空间不足时,都将等比例缩小(默认项目该属性为1)。
如果一个项目的 flex-shrink 属性为0,其他项目都为1,则空间不足时,前者不缩小。

3.4 flex-basis

该属性定义了在分配多余空间之前,项目占据的主轴空间,它的默认值为auto,即项目的本来大小。
如果同时设置 flex-basis 属性和 width 属性,则会以 flex-basis 属性值为准。

3.5 flex

该属性是 flex-grow, flex-shrink 和 flex-basis 的简写, 默认值为0 1 auto。后两个属性可选。

3.6 align-self

该属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。
默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于stretch 。
该属性可能取6个值,除了auto,其他都与 align-items 属性完全一致。

04 布局示例

<style>
* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
h3 {
    color: red;
    font-size: 25px;
    text-align: center;
}
.center-text {
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    line-height: 200px;
}
</style>

01 父元素/容器属性 flex-direction 主轴方向

<div>
    <style>
        .flex-direction-exmaple {
            display: flex;
            flex-direction: row;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .flex-direction-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    <div class="flex-direction-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
    </div>
</div>

在这里插入图片描述

02 父元素/容器属性 flex-wrap 是否换行

<div>
    <style>
        .flex-wrap-exmaple {
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }   
        .flex-wrap-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    <div class="flex-wrap-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

03 父元素/容器属性 flex-flow 主轴方向和换行的简写形式

<div>
    <style>
        .flex-flow-exmaple {
            display: flex;
            flex-flow: row-reverse nowrap;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }  
        .flex-flow-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    <div class="flex-flow-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

04 父元素/容器属性 justify-content 项目在主轴上的对齐方式

<div>
    <style>
        .justify-content-exmaple {
            display: flex;
            justify-content: space-evenly;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }  
        .justify-content-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    <div class="justify-content-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
    </div>
</div>

在这里插入图片描述

05 父元素/容器属性 align-items 单行项目在交叉轴上如何对齐

<div>
    <style>
        .align-items-exmaple {
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .align-items-exmaple div:nth-child(2n) {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .align-items-exmaple div:nth-child(2n + 1) {
            margin: 20px;
            width: 200px;
            height: 400px;
            background-color: purple;
        }
        .align-items-exmaple div:nth-child(3n) {
            line-height: 75px;
        }
    </style>
    <div class="align-items-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

06 父元素/容器属性 align-content 多行项目在交叉轴上如何对齐

<div>
    <style>
        .align-content-exmaple {
            display: flex;
            flex-wrap: wrap;
            align-content: stretch;;
            margin: 0 auto;
            width: 1000px;
            height: 600px;
            background-color: orange;
        }  
        .align-content-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    <div class="align-content-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

07 子元素/项目属性 order 项目的排列顺序

<div>
    <style>
        .order-exmaple {
            display: flex;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .order-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .order-exmaple div:nth-child(3) {
            order: -1;
        }
    </style>
    <div class="order-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
    </div>
</div>

在这里插入图片描述

08 子元素/项目属性 flex-grow 项目的放大比例

<div>
    <style>
        .flex-grow-exmaple {
            display: flex;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .flex-grow-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .flex-grow-exmaple div:nth-child(2) {
            flex-grow: 1;
        }
    </style>
    <div class="flex-grow-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
    </div>
</div>

在这里插入图片描述

09 子元素/项目属性 flex-shrink 项目的缩小比例

<div>
    <style>
        .flex-shrink-exmaple {
            display: flex;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        } 
        .flex-shrink-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .flex-shrink-exmaple div:nth-child(2) {
            flex-shrink: 0;
        }
    </style>
    <div class="flex-shrink-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

10 子元素/项目属性 flex-basis 项目占据的主轴空间

<div>
    <style>
        .flex-basis-exmaple {
            display: flex;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .flex-basis-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .flex-basis-exmaple div:nth-child(2) {
            /* 如果同时设置 flex-basis 属性和 width 属性,则会以 flex-basis 属性值为准 */
            flex-basis: 400px;
        }
    </style>
    <div class="flex-basis-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
    </div>
</div>

在这里插入图片描述

11 子元素/项目属性 align-self 单行项目在交叉轴上如何对齐

<div>
    <style>
        .align-self-exmaple {
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .align-self-exmaple div:nth-child(2n) {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .align-self-exmaple div:nth-child(2n + 1) {
            margin: 20px;
            width: 200px;
            height: 400px;
            background-color: purple;
        }
        .align-self-exmaple div:nth-child(4) {
            align-self: flex-end;
        }
    </style>
    <div class="align-self-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

05 源码

需要源码的同学可以在评论区留下邮箱地址,我这边会尽快发过去的。

06 相关文章

grid 布局

<think>好的,用户想了解CSS Flexbox布局的教程和常见问题解决方案。首先,我需要整理Flexbox的基本概念和核心属性,确保内容结构清晰。根据用户提供的引用,Flexbox解决了传统布局的问题,如垂直居中和等分布局,所以这些应该是重点部分。 接下来,要分步骤讲解Flex容器和项目的属性。容器属性如display: flexflex-direction、justify-content、align-items、flex-wrap和align-content都需要详细说明,每个属性配合示例代码,帮助用户理解。项目属性如order、flex-grow、flex-shrink、flex-basis和align-self同样重要,需要逐一解释。 然后,常见问题解决方案部分需要涵盖用户可能遇到的实际问题,比如垂直居中、等高等宽布局、响应式布局和间距处理。每个问题给出具体的CSS代码示例,并引用用户提供的参考资料来增强可信度,比如引用[^1]和[^2]。 还要注意用户提到的系统级指令,比如数学公式的正确使用,但在这个主题中可能涉及较少。不过要确保所有代码块格式正确,使用反引号包裹,语言标记为css。同时,生成的相关问题需要与Flexbox相关,可能包括兼容性、与Grid布局的区别、常见错误等。 最后,检查回答是否符合中文要求,结构是否合理,引用是否恰当。确保没有使用Markdown格式,段落之间用空行分隔,代码块正确标示。这样用户能够逐步理解Flex布局,并解决实际问题。</think>以下是CSS Flexbox布局的教程及常见问题解决方案,按照学习路径分层讲解: ### 一、Flexbox基础概念 Flexbox布局由弹性容器flex container)和弹性项目(flex item)构成,通过主轴(main axis)和交叉轴(cross axis)实现动态布局[^1]。声明容器只需: ```css .container { display: flex; /* 或 inline-flex */ } ``` ### 二、核心容器属性 1. **布局方向** ```css flex-direction: row | row-reverse | column | column-reverse; ``` ![主轴方向示意图](https://via.placeholder.com/400x100?text=flex-direction+示例) 2. **主轴对齐** ```css justify-content: flex-start | flex-end | center | space-between | space-around; ``` 3. **交叉轴对齐** ```css align-items: stretch | flex-start | flex-end | center | baseline; ``` 4. **换行控制** ```css flex-wrap: nowrap | wrap | wrap-reverse; ``` ### 三、项目属性详解 1. **弹性扩展系数** ```css .item { flex-grow: 0; /* 默认不扩展 */ flex-shrink: 1; /* 默认允许收缩 */ flex-basis: auto; /* 初始尺寸 */ } /* 推荐简写 */ flex: 0 1 auto; ``` 2. **自定义对齐** ```css .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } ``` ### 四、六大常见问题解决方案 1. **垂直居中难题** ```css .container { display: flex; justify-content: center; align-items: center; height: 300px; /* 需明确高度 */ } ``` 传统布局需要复杂hack实现的效果,Flexbox只需两行代码[^2] 2. **等高列布局** ```css .container { display: flex; align-items: stretch; /* 默认值 */ } ``` 3. **响应式导航栏** ```css .nav { display: flex; flex-wrap: wrap; } .nav-item { flex: 1 0 120px; /* 最小宽度120px */ } ``` 4. **间距控制技巧** ```css .container { gap: 10px; /* 现代浏览器支持 */ } /* 兼容方案 */ .item + .item { margin-left: 10px; } ``` 5. **圣杯布局实现** ```css .container { display: flex; flex-direction: column; min-height: 100vh; } .main { flex: 1; } ``` 6. **滚动区域处理** ```css .scroll-container { display: flex; overflow-x: auto; min-width: min-content; } ``` ### 五、最佳实践建议 1. 优先使用`gap`替代margin间距控制 2. 谨慎使用`flex: 1`,明确指定`flex-grow/shrink/basis` 3. 移动端建议添加前缀: ```css .container { display: -webkit-flex; display: flex; } ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值