flex布局详解

最新推荐文章于 2024-07-23 22:43:52 发布

RayShyy

最新推荐文章于 2024-07-23 22:43:52 发布

阅读量2.4w

点赞数 27

分类专栏： css 文章标签： flex flex布局弹性布局 css

本文链接：https://blog.csdn.net/weixin_45112114/article/details/124366223

版权

css 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1. Flex布局是什么?

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

任何一个容器都可以指定为Flex布局。
注意：设为Flex布局后,子元素的float、clear和vertical-align属性将失效。

2. 基本概念

容器：采用Flex布局的元素，称为Flex容器（flex container），简称”容器”;
项目：“容器”的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis 从左至右）和垂直的交叉轴（cross axis 从上至下）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
如下图:
在这里插入图片描述

3. 容器的常用属性(父元素)

容器相当于父元素，即用在父元素上的属性，有下面6个：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

3.1 flex-direction

flex-direction：设置主轴的方向。
它可能有4个值：

row: （默认值）主轴为水平方向，起点在左端，从左至右排列；
row-reverse：主轴为水平方向，起点在右端，从右至左排列；
column：主轴为垂直方向，起点在上沿，从上至下排列；
column-reverse：主轴为垂直方向，起点在下沿，从下至上排列。

代码演示：
这里提一下，如果要给使用flex，需要给父元素加上display: flex。

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

<style>
	.box {
		display: flex;
		width: 600px;
		height: 200px;
		background: skyblue;
	}
	.box div {
		width: 100px;
		height: 100px;
		margin: 0 10px;
		background: purple;
		color: #fff;
	}
</style>

各位在看下列结果的时候注意看元素内容为1的位置。
row：
在这里插入图片描述
row-reverse：

column：

column-reverse：

3.2 flex-wrap

flex-wrap： 控制项目(子元素)是否换行。
它可能取三个值：

nowrap：（默认值）不换行；
wrap：换行，第一行在上方；
wrap-reverse：换行，第一行在下方。

默认情况下是不换行的，如果父元素装不下会缩小所有子元素的宽度，使子元素挤在一起。
看如下例子：

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
    </div>
</body>

<style>
	.box {
		display: flex;
		width: 600px;
		height: 200px;
		background: skyblue;
	}
	.box div {
		width: 100px;
		height: 100px;
		background: purple;
		color: #fff;
	}
</style>

nowrap：
在这里插入图片描述
wrap：

wrap-reverse：

3.3 flex-flow

flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap（这里不再演示）。

3.4 justify-content

justify-content：设置主轴上的子元素对齐方式。
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右：

flex-start：（默认值），左对齐（沿着主轴开始位置至末尾位置对齐）；
flex-end：右对齐（沿着主轴末尾位置至开始位置对齐）；
center：居中对齐；
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；
space-between: 两端对齐，项目之间的间隔都相等。

下面逐个演示(主轴为水平方向)：

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

<style>
	.box {
		display: flex;
		width: 600px;
		height: 200px;
		background: skyblue;
	}
	.box div {
		width: 100px;
		height: 100px;
		margin: 0 10px;
		background: purple;
		color: #fff;
	}
</style>

flex-start:
在这里插入图片描述
flex-end：

center：

space-around：

space-between：

这里其实是两端对齐的，因为小shy给每个子元素设置了margin值。

3.5 align-items

align-items：定义项目在交叉轴上如何对齐。
注意：align-items适用于项目在一行中，不适用于换行。
它可能取5个值，具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：

flex-start：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：交叉轴的中点对齐(可以理解为垂直居中)；
baseline：项目的第一行文字的基线对齐；
stretch：(默认值)，如果项目未设置高度或设为auto，将占满整个容器的高度。

演示如下：

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

<style>
	.box {
		display: flex;
		width: 600px;
		height: 200px;
		background: skyblue;
	}
	.box div {
		width: 100px;
		height: 100px;
		margin: 0 10px;
		background: purple;
		color: #fff;
	}
</style>

flex-start：
在这里插入图片描述

flex-end:
在这里插入图片描述
center:

baseline:
这个值并不怎么常用，这里小shy拿菜鸟的演示图让大家看得更清楚些：

stretch：
注意: 如果设置为这个值并且想看到效果，需要去掉子元素的高度，下面小shy将效果展示出来：

3.6 align-content

align-content：小shy在3.5提到过align-items适用于子元素在单行中使用，这个align-content则就是为了子元素多行的时候设置交叉轴的子元素的排列方式。
该属性可能取6个值：

flex-start：与交叉轴的起点对齐；
flex-end：与交叉轴的终点对齐；
center：与交叉轴的中点对齐；
space-around：根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍；
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；
stretch：(默认值)，占满整个交叉轴。

演示如下：

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
    </div>
</body>

<style>
	.box {
		display: flex;
		flex-wrap: wrap;
		width: 600px;
		height: 400px;
		background: skyblue;
	}
	.box div {
		width: 100px;
		height: 100px;
		background: purple;
		color: #fff;
	}
</style>

flex-start:
在这里插入图片描述
flex-end:

center:

space-around:

space-between:

stretch:

4. 项目的属性(子元素)

有下面6个(都是给子元素加的属性)：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4.1 order属性

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

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

<style>
	.box {
		display: flex;
		width: 600px;
		height: 200px;
		background: skyblue;
	}
	.box div {
		width: 100px;
		height: 100px;
		margin: 0 10px;
		background: purple;
		color: #fff;
	}
	
	.box div:nth-child(2) {
		order: -1;
	}
</style>

效果如下：
在这里插入图片描述

4.2 flex-grow属性（不常用）

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.box div { flex-grow: 1 }: 值都为1，则它们将等分剩余空间：
在这里插入图片描述
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍：

4.3 flex-shrink属性（不常用）

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-shrink: 1
在这里插入图片描述
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小，负值对该属性无效。

4.4 flex-basis属性（不常用）

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex-basis: auto | 350px;

4.5 flex (很重要常用)

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

flex: none | flex-grow flex-shrink flex-basis；

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
一般在开发中：
如果所有的子元素设置flex: 1，则子元素均分主轴剩余空间
在这里插入图片描述
如果一个项目的flex属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍：

子元素占多少份，flex设置对应的值即可。

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

<style>
	.box {
		display: flex;
		width: 600px;
		height: 200px;
		background: skyblue;
	}
	.box div {
		width: 100px;
		height: 100px;
		background: purple;
		color: #fff;
	}
</style>

给每个子元素设置：flex: 1；子元素会均分主轴的剩余空间。
在这里插入图片描述

4.6 align-self属性(单独给自己设置对齐方式)

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
在这里插入图片描述

以上就是小shy对flex布局的全部讲解，图片稍微有点多，导致篇幅过长，主要还是想给大家一个效果图看一下，影响深刻一点，希望大家能够掌握，感谢大家的观看。

RayShyy

关注

27
点赞
踩
80

收藏

觉得还不错? 一键收藏
打赏
1
评论
flex布局详解

1. Flex布局是什么?Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。任何一个容器都可以指定为Flex布局。注意：设为Flex布局后,子元素的float、clear和vertical-align属性将失效。2. 基本概念容器：采用Flex布局的元素，称为Flex容器（flex con
复制链接

扫一扫