初识flex布局

最新推荐文章于 2021-08-25 19:41:13 发布
最新推荐文章于 2021-08-25 19:41:13 发布
阅读量226 收藏
点赞数
分类专栏： 学习笔记 文章标签： css 网页布局 flex html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longyuankang422420/article/details/90235066
版权

初识flex布局

一、 flex的基本理解
任何一个容器都可以指定flex布局，使用flex布局后，那么容器下的子元素的float、clear、vertical-algin属性就会失效。Flex布局容器下的子元素称为flex项目。
在这里插入图片描述
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、 容器的属性
1. flex-direction(flex-direction属性决定主轴的方向,也就是子元素的排列方向)
flex-direction属性可取四个值：
1. row（默认值）：主轴为水平方向，起点在左端。就是从左往右排列。
2.row-reverse：主轴为水平方向，起点在右端。就是从右往左排列。
3.column：主轴为垂直方向，起点在上沿。就是从上往下排列。
4.column-reverse：主轴为垂直方向，起点在下沿。就是从下往上排列。

.flex-container-row{
		display: -webkit-flex; /* Safari */
  		display: flex;				
		flex-direction:row;/**row-reverse，column，column-reverse**/
		height: 300px;
		background: blue;
}
.flex-item{
		width: 50px;
		height: 50px;
		margin: 5px;
		background: pink;
}

<div class="flex-container-row">
		<div class="flex-item">1</div>
		<div class="flex-item">2</div>
		<div class="flex-item">3</div>
		<div class="flex-item">4</div>
		<div class="flex-item">5</div>
</div>

row
row-reverse
column
column-reverse
2. flex-wrap(容器下项目是否换行属性)
flex-wrap属性可取3个值
1.nowrap（默认）：不换行。如果超出容器长度项目则会进行压缩
2.wrap：换行，第一行在上方。
3.wrap-reverse：换行，第一行在下方。

.flex-container-row-nowrap{
		margin: 20px auto;
		width: 1000px;
		display: -webkit-flex; /* Safari */
		display: flex;								
		flex-wrap:nowrap;/*wrap,wrap-reverse*/
		height: 300px;
		background: blue;
}
.flex-item{
		width: 50px;
		height: 50px;
		margin: 5px;
		background: pink;
}

<div class="flex-container-row-nowrap">
			<div class="flex-item">1</div>
			<div class="flex-item">2</div>
			<div class="flex-item">3</div>
			<div class="flex-item">4</div>
			<div class="flex-item">5</div>
			<div class="flex-item">6</div>
			<div class="flex-item">7</div>
			<div class="flex-item">8</div>
			<div class="flex-item">9</div>
			<div class="flex-item">10</div>
			<div class="flex-item">11</div>
			<div class="flex-item">12</div>
			<div class="flex-item">13</div>
			<div class="flex-item">14</div>
			<div class="flex-item">15</div>
			<div class="flex-item">16</div>
			<div class="flex-item">17</div>
			<div class="flex-item">18</div>
			<div class="flex-item">19</div>
			<div class="flex-item">20</div>
			<div class="flex-item">21</div>
			<div class="flex-item">22</div>
			<div class="flex-item">23</div>
			<div class="flex-item">24</div>
			<div class="flex-item">25</div>
			<div class="flex-item">26</div>
			<div class="flex-item">27</div>
			<div class="flex-item">28</div>
			<div class="flex-item">29</div>
			<div class="flex-item">30</div>
			<div class="flex-item">31</div>
	</div>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.flex-flow(flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap)

.flex-container-justify-content{
				margin: 20px auto;
				width: 1000px;
				display: -webkit-flex; /* Safari */
  				display: flex;
  				flex-flow:row nowrap;	
}
.flex-item{
				width: 50px;
				height: 50px;
				margin: 5px;
				background: pink;
}

由于html代码类似，所以这里不再重复写！！！！！！
在这里插入图片描述
所以说flex-flow:row nowarp;和flex-direction:row;flex-wrap:nowarp;效果是一样的

4. justify-content（定义了项目在主轴上的对齐方式。）
justify-content可取5个值
1.flex-start（默认值）：左对齐
2.flex-end：右对齐
3.center： 居中
4.space-between：两端对齐，项目之间的间隔都相等。
5.space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。也就是项目两边的间隔一样大

.flex-container-flex-flow-flex-start{
				margin: 20px auto;
				width: 1000px;
				height: 300px;
				display: -webkit-flex; /* Safari */
 				display: flex;					
 				justify-content:flex-start; /**flex-end,center,space-between,space-around**/	
 				background: blue;			
}	
.flex-item{
				width: 50px;
				height: 50px;
				margin: 5px;
				background: pink;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.align-items（定义项目在交叉轴上如何对齐）
align-items可取5个值
1.stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
2.flex-start：交叉轴的起点对齐。
3.flex-end：交叉轴的终点对齐。
4.center：交叉轴的中点对齐。
5.baseline: 项目的第一行文字的基线对齐。

.flex-container-flex-flow-stretch{
				margin: 20px auto;
				width: 1000px;
				height: 300px;
				display: -webkit-flex; /* Safari */
  				display: flex;	  				
  				align-items:stretch;/**flex-start,flex-end,center,baseline**/						
  				background: blue;				
}	
.flex-item1{
				width: 50px;
				height: 70px;
				margin: 5px;
				background: pink;
	}
.flex-item2{
				width: 50px;
				height: 80px;
				margin: 5px;
				background: pink;
}
.flex-item3{
				width: 50px;
				height: 30px;
				margin: 5px;
				background: pink;
}
.flex-item4{
				width: 50px;
				height: 20px;
				margin: 5px;
				background: pink;
}
.flex-item{
				width: 50px;
				height: auto;			
				background: pink;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
6.align-content(align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用)
align-content属性可取6个值
1.flex-start：与交叉轴的起点对齐。
2.flex-end：与交叉轴的终点对齐。
3.center：与交叉轴的中点对齐。
4.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
5.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
6.stretch（默认值）：轴线占满整个交叉轴。

.flex-container-flex-flow-flex-start{
				margin: 20px auto;
				width: 1000px;
				height: 300px;
				display: -webkit-flex; /* Safari */
  				display: flex;	 
  				flex-wrap: wrap;/**项目换行**/											
  				align-content:flex-start;/**flex-end,flex-end,space-between,space-around,stretch**/
  				background: blue;			
}
.flex-item{
				width: 50px;
				height: 50px;
				margin: 5px;
				background: pink;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
三、项目的属性
1.order(order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。）

.flex-container-row-nowrap{
				margin: 20px auto;
				width: 1000px;
				display: -webkit-flex; /* Safari */
  				display: flex;	
  				height: 400px;
  				background: red;			
}


    <div class="flex-container-row-nowrap">
			<div class="flex-item" style="order: 4;">1</div>
			<div class="flex-item" style="order: 3;">2</div>
			<div class="flex-item" style="order: 2;">3</div>
			<div class="flex-item" style="order: 1;">4</div>
			<div class="flex-item" style="order: 0;">5</div>			
	</div>

在这里插入图片描述
2.flex-grow(flex-grow属性定义项目的放大比例，默认为0。也就是说如果项目没有占满空间，则会按照比例放大)

.flex-container-row-nowrap{
				margin: 20px auto;
				width: 1000px;
				display: -webkit-flex; /* Safari */
  				display: flex;	
  				height: 300px;
  				background: blue;	
  				flex-wrap: wrap;					
}
.flex-item{
				width: 250px;
				height: 50px;
				margin: 5px;
				background: pink;
				
}

<div class="flex-container-row-nowrap">
			<div class="flex-item" style="flex-grow: 3;">1</div>
			<div class="flex-item" style="flex-grow: 2;">2</div>
			<div class="flex-item" style="flex-grow: 1;">3</div>
			<div class="flex-item" style="flex-grow: 3;">1</div>
			<div class="flex-item" style="flex-grow: 2;">2</div>
			<div class="flex-item" style="flex-grow: 1;">3</div>		
			<div class="flex-item" style="flex-grow: 3;">1</div>
			<div class="flex-item" style="flex-grow: 2;">2</div>			
</div>

在这里插入图片描述
3.flex-shrink（定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，设为0则不进行缩小）

.flex-container-row-nowrap{
				margin: 20px auto;
				width: 1000px;
				display: -webkit-flex; /* Safari */
  				display: flex;	
  				height: 300px;
  				background: blue;	
  				flex-wrap: nowrap;		
	}
	.flex-item{
		width: 50px;
		height: 50px;
		margin: 5px;
		background: pink;
	}

<div class="flex-container-row-nowrap">
			<div class="flex-item" style="flex-shrink: 0;">1</div>
			<div class="flex-item" style="flex-shrink: 0;">2</div>
			<div class="flex-item" style="flex-shrink: 0;">3</div>	
			<div class="flex-item" style="flex-shrink: 0;">1</div>
			<div class="flex-item" style="flex-shrink: 0;">2</div>
			<div class="flex-item" style="flex-shrink: 0;">3</div>	
			<div class="flex-item" style="flex-shrink: 0;">1</div>
			<div class="flex-item" style="flex-shrink: 0;">2</div>
			<div class="flex-item" style="flex-shrink: 0;">3</div>	
			<div class="flex-item" style="flex-shrink: 0;">1</div>
			<div class="flex-item" style="flex-shrink: 0;">2</div>
			<div class="flex-item" style="flex-shrink: 0;">3</div>	
			<div class="flex-item" style="flex-shrink: 1;">1</div>
			<div class="flex-item" style="flex-shrink: 2;">2</div>
			<div class="flex-item" style="flex-shrink: 3;">3</div>	
			<div class="flex-item" style="flex-shrink: 1;">1</div>
			<div class="flex-item" style="flex-shrink: 2;">2</div>
			<div class="flex-item" style="flex-shrink: 1;">3</div>	
			<div class="flex-item" style="flex-shrink: 3;">1</div>
			<div class="flex-item" style="flex-shrink: 2;">2</div>
			<div class="flex-item" style="flex-shrink: 1;">3</div>	
			<div class="flex-item" style="flex-shrink: 3;">1</div>
			<div class="flex-item" style="flex-shrink: 2;">2</div>
			<div class="flex-item" style="flex-shrink: 1;">3</div>	
</div>

在这里插入图片描述
4. flex-basis(flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。)
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5.flex(flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选)
6.align-self（允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性）
align-self取值同align-items一致

.flex-container-row-nowrap{
		margin: 20px auto;
		width: 1000px;
		display: -webkit-flex; /* Safari */
		display: flex;	
		height: 300px;
		background: blue;	
		flex-wrap: nowrap;			
}
.flex-item{
		width: 50px;
		height: 50px;
		margin: 5px;
		background: pink;
	}

<div class="flex-container-row-nowrap">
			<div class="flex-item" style="align-self:center;">1</div>
			<div class="flex-item" style="align-self:flex-end;">2</div>
			<div class="flex-item" style="align-self:baseline;">3</div>			
</div>

在这里插入图片描述

hide it.long
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是弹性（Flex）布局 ？15分钟弄懂Flex布局-前端教程
web前端入门基础进阶教程-htmlcssjs
06-30 1027
在网页布局的学习中，我们经常会遇到弹性（Flex）布局，那么弹性（Flex）布局究竟是什么样子的呢？相信你学完了本篇文章就会明白Flex（弹性）布局的真正的意思了。 什么是Flexbox ？ Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局
Flex布局
顽石⚡
12-22 346
flex布局 将固定的像素大小转换为弹性比例大小 公式：结果 = 目标/上下文 即 元素大小除以元素所在的容器 弹性布局可以做到什么 方便垂直居中内容 改变元素的视觉次序 在盒子里自动插入空白及其对其元素，自动对其元素间的空白 自从有了flex，float已经可以说是后娘养的了。 那么问题来了，如何实现flex布局 <!doctype html> <html...
flex 布局转 class 类名实现
言小溪 的博客
08-25 493
目录代码测试flex-wrap属性 : nowrapflex-wrap属性 : wrapalign-items属性 : baselinealign-content属性 : flex-endjustify-content属性 : space-around 首先我们定义一个 less 文件 ， 然后编译 代码 .flex { display: flex; } @wrap: nowrap, wrap; @align-content: flex-start, flex-end, cente
css3-flex块级元素弹性布局
muzidigbig的博客
06-06 5609
Flexbox 是 flexible box 的简称（意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出 来。 place-items 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大...
常用flex元素（可直接作为公用文件引入）
leng0920的博客
06-21 494
/* 文字居中，左右显示 */ .text-align-center{ text-align: center; } .text-align-left{ text-align: left; } .text-align-right{ text-align: right; } /* 文字省略号显示 -webkit-line-clamp: 2;写在响应容器控制显示的行数*/ .text-overflow-num{ display: -webkit-box; overflo.
flex教程，flex基础教程，其中有些程序的编写
04-27
Flex教程详解：初识Flex与基础应用 Flex是由Adobe公司开发的一种开源框架，主要用于构建富互联网应用程序（RIA，Rich Internet Applications）。它结合了MXML和ActionScript两种语言，为开发者提供了一个强大的工具...
flex-超好的flex学习资料
11-24
二、初识Flex：从HelloWorld开始 为了使读者快速上手，书中提供了首个Flex项目——“HelloWorld”的创建步骤，通过这个简单的实例，读者可以初步了解Flex项目的结构，以及如何编写基本的Flex代码，实现界面元素的...
Flex简明中文教程（更新到第四章）
09-01
#### 四、初识Flex：开发环境与HelloWorld程序 ##### 熟悉FlexBuilder开发环境 FlexBuilder的界面由多个常用板块组成，如FlexNavigator（项目导航器）、编辑模块（分为代码和设计两部分）、FlexProperties（属性...
精通CSS.DIV网页样式与布局 第1课 初识CSS.rar
07-14
如`color`改变文本颜色，`font-size`调整字体大小，`background-color`设置背景色，`margin`和`padding`控制元素的边距和内填充，`display`决定元素的显示方式（如块级、行内或Flex布局等）。掌握这些基本属性是理解...
《微信小程序实用教程》教学大纲.pdf
06-08
关键点是Flex布局和特定组件的应用，尤其是Flex布局。 6. **基础内容组件**（4学时，含2学时实践课）：教授图标、文本、富文本和进度条组件的使用，并讲解如何根据需求调整组件属性。重点在于这些基础组件的使用，...
2021前端面试CSS必须要懂的几个地方！
前端啤酒屋
04-09 2583
---------------------------------------------CSS PART--------------------------------------------- 1.Flex 布局 设为flex 布局后 子元素的float clear vertical-align 失效 采用 Flex 布局的元素，称为 Flex 容器 vertical-align 属性设置元素的垂直对齐方式 flex-direction flex-wrap flex-flow justi
uniapp/css 之flex布局
BlizzardWu的博客
05-24 210
阮一峰老师原文地址 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex中Class类
liruizhuang的专栏
09-03 4781
Flex中的Class类和java的差不多，官方上说： 为程序中的每个类定义创建一个 Class 对象。每个 Class 对象都是 Class 类的一个实例。Class 对象包含该类的静态属性和方法。在使用 new 运算符进行调用时，Class 对象会创建该类的实例。
flex布局常用class样式
aptx14的博客
03-05 640
整理一些自己flex布局常用的class样式 /*水平垂直居中并且竖向排列*/ .flexcolumn { display: flex; display: -webkit-flex; flex-direction: column; justify-content: center; /*水平居中*/ align-items: center; /*垂直居中*/
flex 布局 常用class 复制即可使用
lonerwolfs的博客
10-19 492
推荐常用flex布局 /*复制到公共样式文件中即可使用*/ /*盒模型*/ .flex { display: flex; } /* 纵向排列 */ .flex_d_c { flex-direction: column; } /* 横向居中对齐 */ .flex_j_c { justify-content: center; } /* 自适应间距 */ .flex_sx { justify-content: space-around; } /*
css常用布局-flex自适应布局
蓑笠翁
06-20 7712
一、 Flex布局简介 flex布局基于盒状模型，原意为弹性布局，用来为盒状模型提供最大的灵活性。为CSS中display的一个属性；常用于我们常见的分布布局，比如说多个块并列，自适应屏幕宽度等；在移动端应用广泛。目前所有的浏览器都支持flex布局。 二、应用 ...
Flex 2 Metadata Tags
没有天赋的IT人
06-13 694
Flex 2 中的元数据标签                                                                                                                ——告诉编译器如何编译虽然多数Flex开发者都使用过[Bindable]标签，但是很多人都不知道这个标签的作用甚至不知道该标签为何物。[Bi
Flex 布局教程：实例篇
weixin_30409849的博客
09-03 3256
你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节...
Bootstrap4之弹性盒子详解（flexbox）
热门推荐
吉帅振博客
06-21 1万+
个人认为：弹性盒子是Bootstrap中比较重要同时理解也比较困难的一部分，接下来，我就根据自己的理解详细讲述一下对于弹性盒子的看法。1.排序方式2.响应式布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值