CSS3--Flex布局

最新推荐文章于 2023-02-07 22:50:29 发布
原创 最新推荐文章于 2023-02-07 22:50:29 发布 · 置顶 · 483 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3

Flex布局

CSS2传统的盒模型采用float – position布局方式。【PC端】
CSS3的弹性盒模型采用Flex布局方式。【移动端、响应式Bootstrap】

盒模型分类

盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式

Flex布局的术语

在这里插入图片描述

  1. Flex Container：Flex容器。
    启用了弹性盒布局（display:flex;）的块级元素被称为Flex容器。
  2. Flex Item：Flex项目。
    Flex容器内部的子块级元素。
    （1）Main Size，Flex项目在主轴方向上所占的宽度。
    （2）Cross Size，Flex项目在交叉轴方向上所占的高度。
  3. Main Axis：Flex容器的主轴，主轴默认情况下是指水平轴。
    （1）Main Start，主轴的起始位置。
    （2）Main End，主轴的结束位置。
  4. Cross Axis：Flex容器的交叉轴，也被称为“侧轴”，侧轴默认情况下是指垂直轴
    （1）Cross Start，交叉轴的起始位置。
    （2）Cross End，交叉轴的结束位置。
    注意：启用了Flex技术之后，float、clear、vertical-align都不可用。

场景

在小程序及移动端开发中，需要考虑各种尺寸终端设备上的适配。
在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现
比如下面常见的信息列表，要求内容高度不确定情况下，保持垂直居中，这种情况下，建议用flex布局
在这里插入图片描述

不固定高度信息的例子中，只需要在容器中设置以下两个属性即可实现内容不确定下的垂直居中：

  1. display设置盒模型
  2. justify-content盒模型水平方向对齐方式
    .container{ display:flex; flex-decoration:column; justify-content:center;}

作用在Flex Container之上的CSS3中的Flex布局属性

  1. ** 启用Flex布局的方式：display:flex;**
    （1）Flex Item在Flex Container中默认沿主轴排列。
    （2）Flex Item在Flex Container中默认情况下不允许换行。
    若Flex Container的宽度小于所有Flex Item的宽度总和，则各个Flex Item将按照
    原始宽度的比例平均分割Flex Container的宽度。
    （3）在主轴排列的Flex Item必须具备宽度或放大比例（flex-grow），可以不写高度或高
    度取值为auto。
  2. flex-direction：设置主轴的方向。
    取值：（1）row-默认值，表示主轴的方向为水平方向。【相当于float:left;】
    （2）row-reverse，表示主轴的方向为水平方向的反方向。【相当于float:right;】
    （3）column，表示主轴的方向为垂直方向，主轴和交叉轴发生了交换。
    （4）column-reverse，表示主轴的方向为垂直方向的反方向。
  3. justify-content：设置Flex Item在Flex Container中的主轴对齐方式。
    取值：（1）flex-start，默认值，Flex Item在Flex Container中沿着主轴的起始位置对齐。
    （2）flex-end，Flex Item在Flex Container中沿着主轴的结束位置对齐。
    （3）center，Flex Item在Flex Container中沿主轴居中对齐。
    （4）space-between，在Flex Container中平均分布Flex Item，所有的Flex Item之间
    的间隔是一致的。
    （5）space-around，在Flex Container中平均分布Flex Item，所有的Flex Item的两
    端的距离是一致的。
    （6）space-evenly，项目间间距，第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。
  4. align-items：设置Flex Item在Flex Container中的交叉轴对齐方式。
    取值：（1）flex-start，Flex Item在Flex Container中沿着交叉轴的起始位置对齐。
    （2）flext-end，Flex Item在Flex Container中沿着交叉轴的结束位置对齐。
    （3）center，Flex Item在Flex Container中沿交叉轴居中对齐。
    （4）stretch，默认值，Flex Item在Flex Container中拉伸对齐。
    当Flex Item不规定height或height:auto时，Flex Item的高度和Flex Container
    等高。
    （5）baseline，各个Flex Item相对于基线对齐。
    A .若Flex Item内部没有任何文本内容，则Flex Item在Flex Container的顶端
    且各个Flex Item之间底部对齐。
    B .若Flex Item内部具备文本内容，则各个Flex Item相对于文本基线对齐
  5. flex-wrap：设置Flex Item在Flex Container中是否允许换行显示。
    取值：（1）nowrap，默认值，不允许换行。
    （2）wrap，允许在Flex Container宽度小于各个Flex Item总和的情况下换行。
    （3）warp-reverse，允许换行且在垂直方向反向布局。
  6. align-content：设置多主轴情况下Flex Item相对于交叉轴的对齐方式。
    如何实现多主轴效果：（1）Flex Container的宽度小于所有Flex Item宽度之和。
    （2）允许换行。
    取值：（1）flex-start，多根主轴在交叉轴方向上对于交叉轴起始位置对齐。
    （2）flex-end，多根主轴在交叉轴方向上对于交叉轴结束位置对齐。
    （3）center，多跟主轴在交叉轴方向的中心对齐。
    （4）stretch，默认值，拉伸对齐。
    （5）space-between，多根主轴之间的间距是一致的。
    （6）space-around，每根主轴两侧之间的距离是一致的。
    （7）space-evenly，行间间距，以及首行离交叉轴七点和尾行离交叉轴终点距离相等。

align-content与align-items比较类似，同时也比较容易迷糊。
首先明确一点：align-content会以多行作为整体进行对齐，容器必须开启换行。
对比：
在这里插入图片描述
区别：
在属性值上，align-content比align-items多了两个值：space-between和space-around

  1. 复合属性
    flex-flow 属性（作用在Flex Container上的复合属性）：
    相当于direction和wrap的集合
    flex-flow: row nowrap;/* 默认值，顺序排列且不换行 /
    flex-flow:row-reverse wrap;/     反序排列且自动换行 */

作用在Flex Item之上的CSS3中的Flex布局属性

  1. flex-basis：设置Flex Item所占的Main Size（主轴空间大小）。
    项目width属性替代品
    取值：（1）带有单位的数值。
    （2）百分比。
    A .若Flex Container允许换行，则100%将占据Flex Container的整宽。
    B .若Flex Container不允许换行，则100%将占据Flex Container剩余的宽度。
    （3）auto，默认值，Flex Item所占主轴空间大小以width属性为准。若没有设置
    width属性，则该取值无效。
    若width和flex-basis同时存在且取值冲突，则Flex Item以flex-basis为准。

flex-basis属性 ：
• 当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替width属性。
• 当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，flex-basis优先级高于height，就是此时flex-basis代替height属性。
• 需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。

  1. order：设置Flex Item在Flex Container中的显示顺序（沿主轴方向上的排列顺序）。
    取值：（1）0，按照Flex Item在Flex Container中的代码书写顺序排列。
    （2）不带单位的整数，根据整数的升序进行排列。
  2. align-self，设置特定的Flex Item相对于交叉轴自身的对齐方式。
    取值：（1）auto，默认值，依照align-items所设置的属性进行交叉轴对齐，当容器没有设置align-item时，属性值为stretch。
    （2）flex-start
    （3）flex-end
    （4）center
    （5）baseline
    （6）stretch
  3. flex-grow：设置Flex Item在Flex Container中的放大比例（项目的扩张因子）。
    取值：（1）0，默认值，当Flex Container有空余位置时，Flex Item不发生放大效果。
    （2）不带单位的整数，表示当Flex Container有空余位置时，Flex Item的放大比
    例。

扩张因子flex-grow：
• 场景：grow英文意思是<扩大，扩展，增加>，这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，此时flex-grow就可以使得子元素扩张，分享父元素的空间。
• 取值：flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。

  1. flex-shrink：设置Flex Item在Flex Container中的缩小比例（项目的收缩因子）。
    取值：（1）1，默认值，表示若空间不足，则Flex Item缩小。
    （2）0，表示若空间不足，则Flex Item也不缩小。

flex-shrink 作用：
• 当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。
• 未设置flex-shrink时，默认flex-shrink值为1。

  1. 复合属性
    flex属性（作用在Flex Item上的复合属性，简单了解即可）：
    flex-grow、flex-shrink、flex-basis的简写模式
    取值：（1）none，等价于0 0 auto；
    （2）auto，等价于1 1 auto；

经典案例-骰子模型

在这里插入图片描述

<div class="demo">
			<div class="box box1">
				<div class="dot"></div></div>
			<div class="box box2">
				<div class="dot"></div>
			</div>
			<div class="box box3">
				<div class="dot"></div>
			</div>
			<div class="box box4">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box5">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box6">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
			</div>
			<div class="box box7">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			
			<div class="box box8">
				<div class="dot"></div>
			</div>
			<div class="box box9">
				<div class="dot"></div>
			</div>
			<div class="box box10">
				<div class="dot"></div>
			</div>
			<div class="box box11">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box12">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box13">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			<div class="box box14">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			
			<div class="box box15">
				<div class="dot"></div>
			</div>
			<div class="box box16">
				<div class="dot"></div>
			</div>
			<div class="box box17">
				<div class="dot"></div>
			</div>
			<div class="box box18">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot1"></div></div>
			</div>
			<div class="box box19">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot1"></div></div>
			</div>
			<div class="box box20">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
			</div>
			<div class="box box21">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
		</div>

.demo{
	width: 920px;
	height: 400px;
	border: 1px solid gray;
	display: flex;
	flex-wrap: wrap;
}
.box{
	width: 120px;
	height: 120px;
	border-radius: 10px;
	background: rgba(0,0,0,0.7);
	display: flex;
	margin: 5px;
}
.dot{
	width: 30px;
	height: 30px;
	background: #F5F5F5;
	border-radius: 50%;
}
.dot1{
	width: 30px;
	height: 30px;
	background: transparent;
	border-radius: 50%;
}

.box2{
	flex-direction: row;
	justify-content: center;
}
.box3{
	justify-content: flex-end;
}
.box4{
	justify-content: space-between;
}
.box5{
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}
.box6{
	flex-wrap: wrap;
	align-content: space-between;
}
.box6 .row{
	width: 100%;
	display: flex;
}
.box6 .row:nth-of-type(2){
	justify-content: center;
}
.box6 .row:nth-of-type(3){
	justify-content: flex-end;
}
.box7{
	flex-wrap: wrap;
	align-content: space-between;
}
.box7 .row{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.box7 .row:nth-of-type(2){
	justify-content: center;
}


.box8{
	flex-direction: column;
	justify-content: center;
}
.box9{
	justify-content: center;
	align-items: center;
}
.box10{
	justify-content: flex-end;
	align-items: center;
}
.box11{
	flex-direction: column;
	justify-content: space-between;
}
.box12{
	justify-content: space-between;
	align-items: flex-end;
}
.box13{
	justify-content: space-between;
}
.box13 .row{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.box14{
	justify-content: space-between;
}
.box14 .row{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.box15{
	flex-direction: column;
	justify-content: flex-end;
}
.box16{
	align-items: flex-end;
	justify-content: center;
}
.box17{
	align-items: flex-end;
	justify-content: flex-end;
}
.box18,.box19{
	flex-wrap: wrap;
	align-content: space-between;
}
.box18 .row,.box19 .row{
	width: 100%;
	display: flex;
}
.box18 .row:nth-of-type(2){
	justify-content: center;
}
.box19 .row:nth-of-type(2){
	justify-content: flex-end;
}
.box20{
	flex-wrap: wrap;
	align-content: space-between;
}
.box20 .row{
	width: 100%;
	display: flex;
}
.box20 .row:nth-of-type(2){
	justify-content: flex-end;
}
.box21{
	flex-wrap: wrap;
	align-content: space-between;
}
.box21 .row{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.box21 .row:nth-of-type(2){
	justify-content: center;
}
【Flex弹性布局】flex-direction、justify-content、align-items、flex-wrap属性的详细讲解
waterlin2011的博客
06-20 1333
flex-direction、justify-content、align-items、flex-wrap等属性的详细讲解
【CSS布局】Flex 布局
kakaai77的博客
04-07 1395
举例：当设置wrap时，第五个盒子设置的高度为auto，也就是交叉轴的方向（如果交叉轴方向为从左到右，实现效果需设置宽度为auto）​ 在标准流中，我们通过元素的前后顺序来给元素进行排序，在flex布局中，每个元素都有order属性，默认为0。flex flow是flex-direction和flex-wrap的简写，可以任意位置，并且都可以省略。单独对某个item设置，可以覆盖container中的align-items的设置。设置主轴的方向，主轴设置了，交叉轴也就设置成功了。​ 属性值更大的排在后面。
flex布局教程
Jaden
01-11 584
flex 基本概念 flex布局是W3C在2009年提出了一种弹性的自适应布局方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 flex的核心概念是轴和容器。其中容器包裹在外层的是父容器，内层的是子容器。容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置与边框的交叉点是main start，结束位置是main ...
CSS移动端之flex布局（弹性布局）
m0_61547956的博客
04-10 1620
1、原理 通过给父元素设置display：flex,来达到控制子盒子的位置和排列。 采用了Flex布局的元素叫做flex容器，他的所有子元素叫做Flex项目，采用了flex布局float、clear、vertical-align属性失效。 采用了flex布局的元素不用管他是行内元素还是块级元素。 2、flex布局VS传统布局 传统布局： 兼容性好 布局繁琐 局限性 不能在移动端很好的布局 flex弹性布局： 操作方便 布局极为简单 移动端广泛 PC端浏览器支持情况较差 3、flex布局的相
flex布局
li_yan_的博客
03-09 934
一、什么是flex布局 Flex是Flexible Box的缩写，也就是“弹性布局”，用来为盒装模型提供最大的灵活性。 1、任何一个容器都可以指定为Flex 布局 .box{ display:flex } 2、 行内元素也可以使用Flex布局 .box{ display:inline-flex } 3、 Webkit内核的浏览器，必须加上-webkit前缀 .box{ di...
Flex布局详解
热门推荐
半亩方糖
03-31 12万+
Flex 布局详解 一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex? 解决元素居中问题 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语 三个2 序号 简记 术语 1 二成员 容器和项目(container / item) 2 二根轴 主轴与交叉轴(main-axis / cross-axis) 3 二根线 起始线(main/cross-start)与结束
css3-flex布局图解
最新发布
01-03
CSS3 Flex布局是一种全新的布局方式，主要为了解决传统布局方法在不同设备上的适应性问题。Flex布局允许容器内的项目能够更好地排列和对齐，而不需要关心项目的大小和顺序。它提供了一种更加有效的方式来布局、对齐...
CSS -- flex布局【超详教程】
qq_48802092的博客
07-27 1036
flex布局可以简便、完整、响应式地实现各种页面布局，任何一个容器都可以指定为Flex布局。
CSS3样式表-定位之Flex布局.pptx
05-06
Flex布局，全称为Flexible Box布局，是CSS3中一种强大的页面布局工具，旨在提供更为灵活、响应式的网页设计。自2009年由W3C提出以来，它已获得了所有主流浏览器的广泛支持，成为现代网页开发的标准。通过Flex布局，...
flex布局——flex-direction属性
m0_53912558的博客
02-07 1万+
1）flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。2）采用flex布局的元素，称为flex容器，简称"容器"，它的所有子元素自动成为容器成员，称为flex项目（flex item）,简称"项目"。3）才有效果总结：通过给添加flex属性，来控制子盒子的位置和排列方式。
弹性盒模型
D321xiaoding的博客
08-12 897
flex是flexinle Box 的缩写，是弹性布局。 任何容器都可以指定flex布局：display：flex 设置了flex布局后，当前容器内子元素的float，clear，vertical-align属性将全部消失。 采用flex布局后的元素成为flex容器，它所有的子元素自动成为容器成员，称为容器项目。 容器默认存在两根轴：水平的轴（main axis）和垂直轴（竖轴/侧轴）（c...
css的Flex布局（弹性盒模型）的详细说明
leilei__66的博客
07-14 1200
Flex布局 CSS2传统的盒模型采用float – position布局方式。【PC端】 CSS3的弹性盒模型采用Flex布局方式。【移动端、响应式Bootstrap】 盒模型分类 盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式 Flex布局的术语 Flex Container：Flex容器。 启用了弹性盒布局（display:flex;）的块级元素被称为Flex容器。 Flex Item：Flex项目。 Flex容器内部的子块级元素。 （1）Main Size，Flex项目在主轴方向上所占的
弹性盒flex布局
m0_51396253的博客
10-03 119
flex（弹性盒，伸缩盒） -是css中的又一种布局手段，它主要用来代替浮动进行布局 flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变 弹性容器 要使用弹性盒必须要设置一个弹性容器 我们通过display来设置弹性容器 display：flex；设置为块级弹性容器 display：inline-flex设置为行内的弹性容器 -弹性元素 弹性容器的子元素都是弹性元素（弹性项） 弹性元素可以同时是弹性容器 flex-grow默认值是1 ...
css属性
pinganaaa的博客
08-23 277
css属性 样式属性 list-style：none：列表样式没有，功能是去掉无序列表的前缀 text-decoration：none：文本装饰没有，功能是去掉超链接的下划线 font-style：italic：字体样式斜体，功能是将字体设为斜体 文本属性 color：css属性，设置文本内容的颜色，color属性主要可以应用英语单词、十六进制 font-size：字体大小，单位为px font-weight：字体重量 bold：字体加粗，与700等值 normal：字体正常粗细，与400等值
【css】flex 布局
m0_59755550的博客
08-11 776
css+浮动+高度塌陷现象
使用display:flex实现多个子标签等分间距排列
monkey_xiaoda的博客
01-03 7392
今天做项目遇到一个问题：ul标签下有若干个li标签（个数不固定），想要实现平均等分的排列；如效果图： 因为li标签的个数是不固定的，所以不想使用给固定的margin来实现，这样的话太生硬了； 于是想到了使用display:flex;justify-content:space-between;align-items:center;（有浏览器兼容问题） 但出现了如下问题： li标...
css基础2：flex 多行均分有间隙布局
1363648943的专栏
11-13 1万+
效果图： 逻辑：一行有四个的情况 父元素：设置为 flex。justify-content 设置 space-between/space-around。 子元素：设置宽度 百分比／vw （width:calc((100% - 60px))/4 或者width:calc((100vw - 100px))/4 ) ...
CSS3--移动端自适应
web_only_的博客
09-13 2603
CSS单位 CSS中，单位分为两类： 绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的； 相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。 CSS绝对单位：（绝对单位通常使用在打印方面） CSS相对单位 CSS单位浏览器兼容性 CSS重要单位集合： px像素Pixel，绝对长度单位，相对于显示器屏幕分辨率而言的。 em是相对长度单位，相对于当前对象内文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值