Flex布局

爱吃炫迈

于 2023-07-06 18:08:27 发布

阅读量650

点赞数

分类专栏： HTML+CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/ZhangYu_010228/article/details/131582598

版权

HTML+CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

📝个人主页：爱吃炫迈
💌系列专栏：HTML+CSS
🧑‍💻座右铭：道阻且长，行则将至💗

文章目录

flexbox
Flex布局
Flex布局模型
flex相关的属性
思考

flexbox

Flexbox翻译为弹性盒子：

弹性盒子是一种用于按行或按列布局元素的一维布局方法
元素可以膨胀以填充额外得到空间，收缩以适应更小的空间
通常我们使用Flexbox来进行布局的方案称之为flex布局（flex layout）

Flex布局

两个概念：

flex container：开启了flex布局的元素

flex item：flex container里面的子元素

当flex container中的子元素变成了flex item时，具备以下特点：

flex item的布局将受flex container属性的设置来进行控制和布局
flex item不再严格区分块级元素和行内级元素
flex item默认情况下是包裹内容的，但是可以设置宽度和高度

将元素设置display:flex或者display:inline-flex可以成为flex container

flex：flex container以block-level形式存在，相当于是一个块级元素
inline-flex：flex container以inline-level形式存在，相当于是一个行内块元素
这两个属性值的差异的影响在设置了属性值的元素上面，它们在子元素上的效果都是一样的
如果一个元素的父元素开启了flex布局；那么其子元素的display属性对自身的影响将会失效，但是对其内容的影响依旧存在的；举个例子：父元素设置了display: flex，即使子元素设置了display：block或者display：inline的属性，子元素还是会表现的像个行内块元素一样，这就是父元素对其的影响使其display属性对自身的影响失效了；

🌰🌰🌰举例说明：

🔔原始状态

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

🔔设置 display:flex

.box {
    display: flex;
    background-color: pink;
}

🔔设置 display:inline-flex

.box {
    display: inline-flex;
    background-color: pink;
}

Flex布局模型

flex相关的属性

应用在flex container上的CSS属性	应用在flex item上的CSS属性
flex-flow	flex-grow
flex-direction	flex-basis
flex-wrap	flex-shrink
justify-content	order
align-items	align-self
align-content	flex

flex-direction

flex-direction 决定了 main axis 的方向，有 4 个取值
row（默认值）、row-reverse、column、column-reverse

flex-wrap

flex-wrap 决定了 flex container 是单行还是多行显示

nowrap（默认）：单行
wrap：多行
wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

🌰🌰🌰举个栗子：

父盒子宽度为300px，给父盒子设置display:flex
子盒子宽度设置为100px，当添加多个子盒子时

🔔设置flex-wrap:nowrap

父盒子的宽度没有变化，子盒子也确实没有换行，但子盒子的宽度均缩小至能适应不换行的条件为止，这也就是flex布局的惊奇之处

🔔设置flex-wrap:wrap

🔔设置flex-wrap:wrap-reverse

flex-flow

flex-flow属性是flex-direction和flex-wrap的简写

顺序任意，并且都可以省略

justify-content

justify-content 决定了 flex items 在 main axis 上的对齐方式

flex-start（默认值）：与 main start 对齐
flex-end：与 main end 对齐
center：居中对齐
space-between：
- flex items 之间的距离相等
- 与 main start、main end两端对齐
space-around：
- flex items 之间的距离相等
- flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
space-evenly：
- flex items 之间的距离相等
- flex items 与 main start、main end 之间的距离等于 flex items 之间的距离

align-items

align-items 决定了 flex items 在 cross axis 上的对齐方式

normal：在弹性布局中，效果和stretch一样
stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
baseline：与基准线对齐

align-content

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似

stretch（默认值）：与 align-items 的 stretch 类似
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
space-between：
- flex items 之间的距离相等
- 与 cross start、cross end两端对齐
space-around：
- flex items 之间的距离相等
- flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
space-evenly：
- flex items 之间的距离相等
- flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离

flex item 的属性开始啦~~🎉🎉🎉🎉🎉🎉

order

order 决定了 flex items 的排布顺序

可以设置任意整数（正整数、负整数、0），值越小就越排在前面
默认值是 0

flex items

flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

auto（默认值）：遵从 flex container 的 align-items 设置
stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

flex-grow

flex-grow 决定了 flex items 如何扩展(拉伸/成长)

可以设置任意非负数字（正小数、正整数、0），默认值是 0
当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为
- flex container 的剩余size： (size / sum) * flex-grow
flex items 扩展后的最终 size 不能超过 max-width\max-height

解释说明：

父盒子宽度为100px
三个子盒子宽度分别是200px，所以父盒子还剩400px
若三个子盒子的flex-grow分别是1，2, 1
所以第一个盒子将扩展400/(1+2+1)*1=100px
同理第二个盒子将扩展200px，第三个盒子将扩展100px

flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-shrink

flex-shrink 决定了 flex items 如何收缩(缩小)

可以设置任意非负数字（正小数、正整数、0），默认值是 1
当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为:
- flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
flex items 收缩后的最终 size 不能小于 min-width\min-height

flex-basis

flex-basis 用来设置 flex items 在 main axis 方向上的 base size

auto（默认值）、具体的宽度数值（100px）
决定 flex items 最终 base size 的因素，从优先级高到低
- max-width\max-height\min-width\min-height
- flex-basis
- width\height
- 内容本身的 size

🌰🌰🌰举个栗子：

直接设置中间盒子的width，若盒子中的内容超出盒子的宽度的话是不会显示的

设置中间盒子的flex-basis，若盒子中的内容超出盒子的宽度的话还是会显示的

flex

flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

单值语法
- 一个无单位数：它会被当做<flex-grow>的值
- 一个有效的宽度值：它会被当做<flex-basis>的值
- 关键字none，auto或initial
双值语法
- 第一个值必须为一个无单位数，并且它会被当做<flex-grow>的值
- 第二个值必须为以下之一：
  - 一个无单位数：它会被当做<flex-shrink>的值
  - 一个有效的宽度值：它会被当做<flex-basis>的值
三值语法
- 第一个值必须为一个无单位数，并且它会被当做<flex-grow>的值
- 第二个值必须为一个无单位数，并且它会被当做flex-shrink的值
- 第三个值必须为一个有效的宽度值，并且它会被当做<flex-basis>的值

思考

flex布局中如何解决以下问题：

我们希望6号盒子按顺序排放，即6号盒子的位置在2号盒子的下面

解决方法：

在最后添加列数-2个任意标签，然后将标签宽度设置成盒子的宽度

// html
<div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item5">6</div>
    <!-- 添加span标签的个数是列数-2 -->
    <span></span>
    <span></span>
</div>

// css
.box {
    width: 500px;
    background-color: pink;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* 设置span宽度 */
.box span {
    width: 110px;
}

.item {
    height: 140px;
    width: 110px;

    background-color: palegreen;
}

```

// css
.box {
    width: 500px;
    background-color: pink;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* 设置span宽度 */
.box span {
    width: 110px;
}

.item {
    height: 140px;
    width: 110px;

    background-color: palegreen;
}