flex响应式布局详解

youhebuke225

已于 2022-07-13 20:42:45 修改

阅读量5.3k

点赞数 7

分类专栏： # CSS基础文章标签： css3 flex

于 2020-06-11 18:59:19 首次发布

本文链接：https://blog.csdn.net/youhebuke225/article/details/106414855

版权

CSS基础专栏收录该内容

12 篇文章 3 订阅

订阅专栏

flex响应式布局

源码点击

支持性
在这里插入图片描述
IE10+ 支持flex属性

开启flex布局：display:flex
对于Webkit 的浏览器display:webkit-flex 详情点击

准备

我们先准备这样的几个盒子

CSS

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
}
.inner{
	font-weight: bold;
	color: white;
	text-align: center;
	line-height: 100px;
	font-size: 40px
}
.inner:nth-child(even){
	width: 100px;
	height: 100px;
	background-color: red;
}
.inner:nth-child(odd){
	width: 100px;
	height: 100px;
	background-color: #000000;
}

html

<div class="wrapper">
	<div class="inner">1</div>
	<div class="inner">2</div>
	<div class="inner">3</div>
</div>

打开后，他是这样的
在这里插入图片描述

1 容器属性

我们首先来学习容器属性，就是包裹容器的盒子的属性，这个盒子是哪个的flex属性仅仅对于直系子元素有用，对于孙子元素则无效

一共有六个属性

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

我们开启flex

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
}

开启之后是这个样子的
在这里插入图片描述

如果某个盒子只有宽度没有高度，那么，他的高度会自动增长为最大的高度

1.1 主轴布局

什么是主轴

当我们开启flex布局的时候，拥有了主轴和侧轴，相当于一个坐标系，主轴相当于x轴，侧轴相当于y轴

在这里插入图片描述

1.1.1 `flex-direction`

简单的来说：他是用来旋转坐标系的

flex-direction: row 主轴方向向右
row-reverse 主轴方向向左
column 主轴方向向下
column-reverse主轴方向向上

在这里插入图片描述
1.flex-direction: row

开启flex后的默认主轴方向

2.flex-direction: row-reverse

把坐标轴变成了一个镜面对称(reverse反的)

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	flex-direction: row-reverse;
}

在这里插入图片描述

3.flex-direction: column

主轴方向向下

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	flex-direction: column;
}

在这里插入图片描述
4.flex-direction: column-reverse;

主轴方向向上

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	flex-direction: column-reverse;
}

在这里插入图片描述

1.1.2 `flex-wrap`

盒子总宽度超过父元素
超出部分是否换行

nowrap 不换行
wrap 换行
wrap-reverse;反方向换行

增加几个盒子

<div class="wrapper">
	<div class="inner">1</div>
	<div class="inner">2</div>
	<div class="inner">3</div>
	<div class="inner">4</div>
	<div class="inner">5</div>
	<div class="inner">6</div>
	<div class="inner">7</div>
</div>

加完之后他是这样子的

在这里插入图片描述

我们就发现了，即使我们加再多的盒子，尽管所有的盒子加起来超过了父元素，但是他都是在一行上面的并且元素中的盒子的宽度还变小了！
这时我们就要注意了，弹性容器中的盒子，我们可以把他看做一个弹簧，而我们给盒子一个宽度，就相当于给弹簧一个初始宽度，容器是固定的，超出容器的部分就会被压缩，就会出现上述效果
要想使盒子不想弹簧一样被压缩，我们就得用一个属性flex-shrink:0,他可以防止盒子被压缩，需要加载被压缩的盒子上

.inner{
	font-weight: bold;
	color: white;
	text-align: center;
	line-height: 100px;
	font-size: 40px;
	flex-shrink: 0;
}

在这里插入图片描述

然后我们就发现了盒子没有被压缩，而是超出了父元素

1.flex-wrap：nowrap

开启flex后的默认不换行

2.flex-wrap：wrap

在主轴的起点进行换行

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	flex-wrap: wrap;
}

在这里插入图片描述
3.flex-wrap：wrap-reverse

翻转换行，第一行在下面

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	flex-wrap: wrap-reverse;
}

在这里插入图片描述

1.1.3 `flex-flow`

这个属性是上面两个属性的缩写
flex-flow: <flex-direction> || <flex-wrap>

css

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	flex-flow: column wrap-reverse;
}

在这里插入图片描述

1.1.4 `justify-content`

主轴上元素的布局

flex-start 从主轴的起点开始
flex-end 从主轴的终点开始
center 居中
space-between两端对齐
space-around空间平均分布在每个盒子的两边

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

开启flex是的默认布局

2. flex-end

盒子从主轴中点开始布局

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	/* 盒子从主轴中点开始布局 */
	justify-content: flex-end;
}

在这里插入图片描述
3. center

在主轴上居中布局

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	/* 在主轴上居中布局 */
	justify-content: center;
}

在这里插入图片描述

4. space-between

在主轴上进行了两端对齐

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	/* 在主轴上进行了两端对齐 */
	justify-content: space-between;
}

在这里插入图片描述

5. space-around

空间平均分布在每个盒子的两边

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	/* 空间平均分布在每个盒子的两边 */
	justify-content: space-around;
}

在这里插入图片描述

1.2 侧轴布局

什么是侧轴？

侧轴永远与主轴垂直，方向主轴的改变而改变
使用侧轴属性的时候一定要注意在侧轴方向上一定具有一定的空间(具有固定的长度，或者被撑开的长度)

我们对上述例题稍微修改

html

<div class="wrapper">
	<div class="inner">1</div>
	<div class="inner">2</div>
	<div class="inner">3</div>
	<div class="inner">4</div>
</div>

css

.inner:nth-child(odd){
	width: 100px;
	height: 200px;
	background-color: #000000;
}

主要修改了高度，修改之后
在这里插入图片描述

1.2.1 `align-items`

用来调整侧轴上的盒子的对齐方向，演示的主轴方向为flex-direction:raw

flex-start
flex-end
center
baseline
stretch

1. flex-start

从侧轴的起点开始盒子布局，这是开启flex后的(盒子有高度时)默认布局方式，效果如上图所示

2. flex-end

从侧轴的终点开始盒子布局

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	align-items: flex-end;
}

在这里插入图片描述
3. center

使盒子在侧轴上进行居中

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	align-items: center;
}

在这里插入图片描述
4. baseline

使用文字让盒子进行对齐，文字基线对齐

.wrapper{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	display: flex;
	align-items: baseline;
}
.inner:nth-child(odd){
	width: 100px;
	height: 200px;
	line-height: 200px;
	background-color: #000000;
}

在这里插入图片描述

5. stretch

如何盒子没有设置高度，则在侧轴方向上面进行拉伸充满父元素(没有高度时默认值）

我们把上面例题的高度全部去掉

1.3 多轴布局

一般元素出现换行的时候，会出现多轴布局，我们利用flex-flow时的元素布局。并稍微修改一下，修改了宽高和布局方式

css

.wrapper{
	width: 300px;
	height: 500px;
	border: 1px solid black;
	display: flex;
	flex-flow:  wrap;
}

在这里插入图片描述

1.3.1 `align-content`

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

1. flex-start

从侧轴开始的地方进行布局

.wrapper{
	width: 300px;
	height: 500px;
	border: 1px solid black;
	display: flex;
	flex-flow:  wrap;
	align-content: flex-start;
}

在这里插入图片描述
2. flex-end

从侧轴结束的地方进行布局

.wrapper{
	width: 300px;
	height: 500px;
	border: 1px solid black;
	display: flex;
	flex-flow:  wrap;
	align-content: flex-end;
}

在这里插入图片描述
3. center

多轴在侧轴进行居中

.wrapper{
	width: 300px;
	height: 500px;
	border: 1px solid black;
	display: flex;
	flex-flow:  wrap;
	align-content: center;
}

在这里插入图片描述

4. space-between

多轴在侧轴进行两端对齐

.wrapper{
	width: 300px;
	height: 500px;
	border: 1px solid black;
	display: flex;
	flex-flow:  wrap;
	align-content: space-between;
}

在这里插入图片描述
5. space-around

多轴在侧轴上的剩余空间平均分布在每个轴线的两边

.wrapper{
	width: 300px;
	height: 500px;
	border: 1px solid black;
	display: flex;
	flex-flow:  wrap;
	align-content: space-around;
}

在这里插入图片描述

6. stretch

默认值。每个轴线凭据分配空间，有高度显示高度的一部分，没有高度则充满空间

.wrapper{
	width: 300px;
	height: 500px;
	border: 1px solid black;
	display: flex;
	flex-flow:  wrap;
	/* 因为是默认值写不写都可以 */
	align-content: stretch;
}

有高度的时候

.inner:nth-child(even){
	width: 100px;
	height: 100px;
	background-color: red;
}
.inner:nth-child(odd){
	width: 100px;
	height: 100px;
	background-color: #000000;
}

在这里插入图片描述

没有高度的时候

.inner:nth-child(even){
	width: 100px;
	/* height: 100px; */
	background-color: red;
}
.inner:nth-child(odd){
	width: 100px;
	/* height: 100px; */
	background-color: #000000;
}

在这里插入图片描述

2 项目属性

什么是项目属性？

容器的直系子元素

<div class="wrapper">
	<div class="inner">1</div>
	<div class="inner">
		<div class="inner-child"></div>
	</div>
</div>

如上面所示

如果wrapper是弹性容器(即有display:flex属性),那么inner是弹性项目，而inner-child不是弹性项目

属性

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

2.1 `order`

order后边可以跟一个整数(正负都可以)，order的数值越大越往后面排

.inner:nth-child(1){
	order: 3;
}
.inner:nth-child(2){
	order: -5;
}
.inner:nth-child(3){
	order: 1;
}

在这里插入图片描述

2.2 `flex-grow`

如果父元素还有剩余的空间，拥有此属性的元素会自动增长并填满剩余的空间
他后面跟一个整数，如果兄弟元素也有此属性的话，会将剩余空间平均分配，他们会随flex-grow分配到每个元素

.inner:nth-child(1){
	flex-grow: 1;
}
.inner:nth-child(2){
	flex-grow: 5;
}
.inner:nth-child(3){
	flex-grow: 1;
}

在这里插入图片描述

2.3 `flex-shrink`

与flex-grow相反，当父元素空间不够的时候他会进行缩小，而flex-shrink就是控制缩小的的属性
他后面也是跟一个整数，不过他的算法比较麻烦，我们只要知道后面跟的数值越大，则缩小的越多
flex-shrink：0表示不收缩

.inner:nth-child(even){
	width: 200px;
	height: 100px;
	background-color: red;
}
.inner:nth-child(odd){
	width: 200px;
	height: 100px;
	background-color: #000000;
}
.inner:nth-child(1){
	flex-shrink: 0;
}
.inner:nth-child(2){
	flex-shrink: 66;
}
.inner:nth-child(3){
	flex-shrink: 2;
}

在这里插入图片描述

2.4 `flex-basis`

盒子初始的时候，所占的空间大小
默认值auto,初始大小就是我们设置的宽度，也可以自定义宽度，详情点击

.inner:nth-child(1){
	flex-basis: 300px;
}
.inner:nth-child(2){
	flex-basis: 50px;
}
.inner:nth-child(3){
	flex-basis: auto;
}

在这里插入图片描述

2.5 `flex`

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
可以直接设置为auto表示flex:1 1 auto
可以直接设置成none表示flex:0 0 auto

.inner:nth-child(1){
	flex: auto;
}
.inner:nth-child(2){
	flex: none;
}
.inner:nth-child(3){
	flex: 3 0 auto;
}

在这里插入图片描述

2.6 `align-self`

单个盒子在侧轴上有不同的对齐方式

属性值

auto 继承align-items的属性
flex-start 盒子从侧轴开始的地方布局
flex-end 盒子从侧轴结束的地方布局
center 盒子在侧轴居中位置
baseline 文字基线对其
stretch默认值，没有高度自动充满父元素

.inner:nth-child(1){
	align-self: center;
}
.inner:nth-child(2){
	align-self: flex-end;
}
.inner:nth-child(3){
	align-self: stretch;
}

在这里插入图片描述

其他说明

开启flex的盒子不会脱离文档流

youhebuke225

关注

7
点赞
踩
37

收藏

觉得还不错? 一键收藏
1
评论
flex响应式布局详解

align-item
复制链接

扫一扫

专栏目录

flex响应式布局详解

目录

flex响应式布局

1 容器属性

1.1 主轴布局

1.1.1 flex-direction

1.1.2 flex-wrap

1.1.3 flex-flow

1.1.4 justify-content

1.2 侧轴布局

1.2.1 align-items

1.3 多轴布局

1.3.1 align-content

2 项目属性

2.1 order

2.2 flex-grow

2.3 flex-shrink

2.4 flex-basis

2.5 flex

2.6 align-self

其他说明

“相关推荐”对你有帮助么？

1.1.1 `flex-direction`

1.1.2 `flex-wrap`

1.1.3 `flex-flow`

1.1.4 `justify-content`

1.2.1 `align-items`

1.3.1 `align-content`

2.1 `order`

2.2 `flex-grow`

2.3 `flex-shrink`

2.4 `flex-basis`

2.5 `flex`

2.6 `align-self`