CSS3-flex布局 | 弹性盒模型

最新推荐文章于 2024-03-08 18:05:09 发布

2301_76429513

最新推荐文章于 2024-03-08 18:05:09 发布

阅读量1k

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2301_76429513/article/details/131633133

版权

传统布局与flex布局

传统布局

兼容性好
布局繁琐
局限性，不能在移动端很好地布局

flex 弹性布局

操作方便，布局极为简单，移动端应用很广泛
PC 端浏览器支持情况不如移动端

flex 布局的基本概念

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。
在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。
特点：

一维布局
任何一个容器都可以指定为 flex 布局
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
这些叫法是一个意思，伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

当使用 flex 布局时，首先想到的是两根轴线 — 主轴(Main Axis)和交叉轴(Cross Axis)。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关,flex 主要用这两个轴来控制布局
例如

上图说明如下：

main axis 是主轴，该轴的开始为 main start，结束为 main end。
cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
flex item 是 flex 容器中的元素。
在这个弹性盒子中，提供了一些属性来操作这些元素

Flex 容器

文档中采用了 flexbox 的区域就叫做 flex 容器。指定一个容器的属性为display: flex | inline-flex即创建了一个flex 容器。完成这一步之后，容器中的直系子元素就会变为 flex 元素（flex item）。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
flex-basis 属性为 auto。
flex-wrap 属性为 nowrap。
这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

flex 布局父项常见属性

常见父项属性
以下有6个属性是对父元素设置的

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-items：设置侧轴上的子元素排列方式（单行）
align-content：设置侧轴上的子元素的排列方式（多行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-direction

该属性指定了弹性子元素在父容器中的排列方向和顺序。
其语法格式为：
flex-direction: row | row-reverse | column | column-reverse;

属性值	描述
row	横向从左到右排列，默认的排列方式。
row-reverse	反转横向排列，即从右往左排，最后一项排在最左边
column	纵向排列，从上往下排
column-reverse	反转纵向排列，即从下往上排，最后一项排在最上面

flex-direction:row

flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

justify-content

justify-content设置主轴上的子元素排列方式
注意：使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值，元素从容器的起始线排列
flex-end	从终止线开始排列
center	在主轴居中对齐
space-between	flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到元素之间，所以元素之间间隔相等，就是两侧的flex item会贴着flex容器的边
space-around	flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到每个元素主轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小
space-evenly	flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到每个元素主轴方向的间隙，每个间隙都是相等的，主轴两端也会有间隙。兼具了space-between与space-around的特点

假设flex-direction: row;

flex-start
flex-end
center
space-between
space-around
space-evenly

flex-wrap

指定弹性盒子的子元素换行方式。
其语法格式为：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

属性值	描述
nowrap	默认，不换行，弹性容器为单行。该情况下弹性子项可能会溢出容器，如果一行容纳不下默认会等比例压缩flex item
wrap	弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse	反转 wrap 排列，按从左往右，从下往上的顺序排列，会换行，下一行在上一行的上方

	`<!DOCTYPE html>`
	`<html lang="en">`
	`<head>`
	`<meta charset="UTF-8" />`
	`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
	`<title>Document</title>`
	`<style>`
	`div {`
	`width: 100px;`
	`height: 100px;`
	`color: black;`
	`}`

	`#content {`
	`width: 240px;`
	`height: 300px;`
	`background-color: white;`
	`border:1px solid #000;`

	`display: flex;`
	`flex-wrap: nowrap;`
	`}`
	`.item1 {`
	`background-color: #ffe5b9;`
	`}`
	`.item2 {`
	`background-color: #eff8ff;`
	`}`
	`.item3 {`
	`background-color: #c9cbff;`
	`}`
	`</style>`
	`</head>`
	`<body>`
	`<div id="content">`
	`<div class="item1">1</div>`
	`<div class="item2">2</div>`
	`<div class="item3">3</div>`
	`</div>`
	`</body>`
	`</html>`

nowrap：由于没有换行，且是弹性盒模型，一行放不下，所以盒子被压缩成width:80px

wrap

wrap-reverse

align-items

设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项（单行）的时候使用

属性值	说明
flex-start	贴着侧轴起始线
flex-end	贴着侧轴尾线
center	侧轴上居中
stretch	未给flex item设置侧轴上的长度时，将flex item拉伸到与flex容器侧轴上的长度一样长。如果flex item设置了侧轴上的长度则stretch
baseline	文字基线对齐

假设flex-direction: row;

flex-start
flex-end
center
stretch: 这里要子元素不设置高度才生效
baseline

align-content

设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

属性值	说明
flex-start	贴着侧轴起始线排列
flex-end	贴着侧轴尾线排列
center	在侧轴居中对齐
space-between	flex容器除去flex item在侧轴所占的空间后，将剩余空间平均分配到元素之间，所以元素之间间隔相等，就是两侧的flex item会贴着flex容器的边
space-around	flex容器除去flex item在侧轴所占的空间后，将剩余空间平均分配到每个元素侧轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小
stretch	拉伸子元素，使得子元素平均占满父元素侧轴方向的长度，同样注意子元素不能在侧轴方向上设置长度，否则 stretch会失效

假设flex-direction: row;
flex-start

flex-end

center

space-between

space-around

stretch

align-content 和 align-items 区别

align-items 适用于单行情况下，对多行也生效，只有上对齐、下对齐、居中和拉伸这些效果
align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行用 align-items 多行用 align-content，判断是否是单行就看有没有分行

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;等效于flex-direction: row;flex-wrap: wrap;

flex 布局子项常见属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

flex 属性

flex是个复合属性，属性值只有一个不带单位的数字时，与flex-grow等效, 父元素主轴长度大于子元素主轴长度总和时，子元素主轴长度=free space*(该元素的flex数字/所有子元素flex数字之和)

	`/* 关键字值 */`
	`flex: auto;`
	`flex: initial;`
	`flex: none;`

	`/* 一个值，无单位数字：flex-grow */`
	`flex: 2;`

	`/* 一个值，width/height: flex-basis */`
	`flex: 10em;`
	`flex: 30px;`
	`flex: min-content;`

	`/* 两个值：flex-grow \| flex-basis */`
	`flex: 1 30px;`

	`/* 两个值：flex-grow \| flex-shrink */`
	`flex: 2 2;`

	`/* 三个值：flex-grow \| flex-shrink \| flex-basis */`
	`flex: 2 2 10%;`

	`/全局属性值 /`
	`flex: inherit;`
	`flex: initial;`
	`flex: unset;`

flex 属性定义flex item分配剩余空间(free space)，用flex来表示占多少份数。

	`.item {`
	`flex: <number>; /* default 0 */`
	`}`

举例1: 第1个和第3个子元素都指定了宽度，free space=flex容器宽度-设定了宽度的子元素的宽度。因为只有第二个子元素指定flex:1，且flex容器有剩余的空间，所以该子元素的宽度=free space*(1/1)=free space, 即它会把剩余空间占满

	`section {`
	`display: flex;`
	`width: 60%;`
	`height: 150px;`
	`background-color: pink;`
	`margin: 0 auto;`
	`}`

	`section div:nth-child(1) {`
	`width: 100px;`
	`height: 150px;`
	`background-color: red;`
	`}`

	`section div:nth-child(2) {`
	`flex: 1;`
	`background-color: green;`
	`}`

	`section div:nth-child(3) {`
	`width: 100px;`
	`height: 150px;`
	`background-color: blue;`
	`}`

	`<section>`
	`<div></div>`
	`<div></div>`
	`<div></div>`
	`</section>`

举例2：因为子元素都没设置宽度，所以剩余空间就是父元素的宽度。子元素都指定了flex，所以它们的宽度=free space*(本元素flex值/子元素flex值总和), 即flex数字是多少就占父元素宽度的几份

	`p {`
	`display: flex;`
	`width: 60%;`
	`height: 150px;`
	`background-color: pink;`
	`margin: 100px auto;`
	`}`

	`p span {`
	`flex: 1;`
	`}`

	`p span:nth-child(2) {`
	`flex: 2;`
	`background-color: purple;`
	`}`

	`<p>`
	`<span>1</span>`
	`<span>2</span>`
	`<span>3</span>`
	`</p>`

如果子元素都为flex:1;则子元素均分剩余空间

	`p span {`
	`flex: 1;`
	`}`

align-self

控制子项自己在侧轴上的排列方式
align-self 属性允许单个子项有与其他子项不一样的对齐方式，可覆盖 align-items 属性。
值

auto: 默认值，继承父元素的 align-items 值，如果没有父元素，则等同于 stretch
normal: 效果取决于当前的布局模式
flex-start：flex 元素会对齐到 cross-axis 的首端。
flex-end：flex 元素会对齐到 cross-axis 的尾端。
center：flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。

	`span:nth-child(3) {`
	`/* 设置自己在侧轴上的排列方式 */`
	`align-self: flex-end;`
	`}`

order

属性定义项目的排列顺序
数值越小，排列越靠近主轴起始线，默认为0。
注意：和 z-index 不一样。

	`.item {`
	`order: <number>;`
	`}`

	`<head>`
	`<title>Document</title>`
	`<style>`
	`div {`
	`display: flex;`
	`width: 80%;`
	`height: 300px;`
	`background-color: pink;`
	`}`
	`div span {`
	`width: 150px;`
	`height: 100px;`
	`}`
	`div span:nth-child(2) {`
	`/* 默认是0 -1比0小所以在前面 */`
	`order: -1;`
	`}`
	`</style>`
	`</head>`

	`<body>`
	`<div>`
	`<span style="background-color: red;">1</span>`
	`<span style="background-color: green;">2</span>`
	`<span style="background-color: skyblue;">3</span>`
	`</div>`
	`</body>`

2301_76429513

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS3-flex布局 | 弹性盒模型

举例1: 第1个和第3个子元素都指定了宽度，free space=flex容器宽度-设定了宽度的子元素的宽度。flex是个复合属性，属性值只有一个不带单位的数字时，与flex-grow等效, 父元素主轴长度大于子元素主轴长度总和时，子元素主轴长度=free space*(该元素的flex数字/所有子元素flex数字之和)子元素都指定了flex，所以它们的宽度=free space*(本元素flex值/子元素flex值总和), 即flex数字是多少就占父元素宽度的几份。指定一个容器的属性为。
复制链接

扫一扫