精华内容
下载资源
问答
  • 弹性布局

    2019-08-10 14:32:21
    弹性布局 在制作网页的过程中,布局是我们最重要的一个环节,可以说布局的好坏直接影响到整个网页的成败,布局成,则事半功倍,布局败,则事倍功半。随着移动互联的到来,响应式网站风靡。这也就兴起了一种新的布局...

    弹性布局
    在制作网页的过程中,布局是我们最重要的一个环节,可以说布局的好坏直接影响到整个网页的成败,布局成,则事半功倍,布局败,则事倍功半。随着移动互联的到来,响应式网站风靡。这也就兴起了一种新的布局方式——弹性布局。取代我们之前“display+float+position”的布局方式,采取全新的弹性布局,会让你的网站如丝绸般顺滑!
    弹性布局(Flex布局):display:fixed(2009年推出)
    弹性布局的优点:可以解决复杂的问题,缺点是IE不兼容
    注意:改变的是父元素的布局方式,由默认的流式布局改变成弹性布局;
    基本概念:1.容器 2.项目
    1.容器:在这里指的是需要添加弹性布局的【父元素】
    2.项目:弹性布局容器中的每一个子元素,称之为项目;
    基本方向:1.主轴 2.交叉轴
    1.主轴:默认为盒子水平方向,可以通过属性改变主轴方向
    2.交叉轴:与主轴垂直的就是交叉轴;
    小结:【弹性布局】改变的是【容器内部】的布局方式
    从流式布局改变成弹性布局
    布局方式的规律是沿着【主轴起始方向】排列,在【主轴方向】有不同的对齐方式;
    当容器中的流发生变化时,子元素也会受到影响;由块元素变成行内块;

    display:flex 的十二个属性
    6个作用于父容器,6个作用于子项目
    作用于父容器的6个属性:
    1.flex-direction属性:决定主轴的方向
    row(默认值):主轴为水平方向,起点在左端
    row-reverse:追轴在水平方向,起点在右端
    column:主轴为垂直方向,起点在上沿;
    column-reverse:主轴为垂直方向,起点在下沿

    2.flex-wrap属性:定义:如果一条轴线排不下,是否换行,如何换行
    nowrap:(默认值)不换行,当容器宽度不够时,每个项目会被挤压宽度;
    wrap:换行,并且第一行在容器最上方;
    wrap-reverse:换行,并且第一行在容器最下方;
    3.flex-flow :
    是【flex-direction和flex-wrap】的缩写形式,默认值是:flex-flow:row wrap;
    4.justify-content属性:定义:项目在主轴上的对齐方式
    (此属性与主轴方向息息相关)
    主轴方向:row-起点在左边,row-reverse-起点在左边,column-起点在上边,column-reverse-起点在下边
    flex-start(默认值):项目位于主轴起点
    flex-end:项目位于主轴终点
    center:居中
    space-between:两端对齐,项目之间的间距都相等。(开头和最后的项目,与父容器边缘没有间隔)
    space-around:每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目,与父容器边缘有一定的间隔);
    5.align-items属性:定义:项目在交叉轴上如何对齐
    flex-start:交叉轴的起点对齐;
    flex-end:交叉轴的终点对齐;
    center:交叉轴的中点对齐;
    baseline:项目的第一行文字的基线对齐。(文字的行高,字体大小会影响美航的基线)
    stretch(默认值):如果项目未设置高度或设为 【auto】,将占满整个容器的高度。
    6.align-content属性:定义:多跟轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
    (当项目换为多行时,可使用align-content取代align-items)
    flex-start:与交叉轴的起点对齐;
    flex-end:与交叉轴的终点对齐;
    center:与交叉轴的中点对齐;
    space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch(默认值):轴线占满整个交叉轴;

    2.作用于子项目中的6大属性
    1.order属性:定义:项目中的排列顺序。数值越小,排列越靠前。默认值为0;
    2.flex-grow属性:定义:项目的放大比例。默认值是0;即如果存在剩余空间,也不放大;
    3.flex-shrink属性:定义:项目的缩小比例,默认值是1,即如果空间不足,该项目将缩小;
    4.flex-basis定义:项目占据的株洲空间。(如果主轴方向为水平方向,则设置这个属性,相当于设置项目的宽度。原来的【width】将会失效);
    5.flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值是0,1,auto。然后两个属性可选。
    6.align-self:定义:单个项目自身在交叉轴上的排列方式,可以覆盖掉容器上的align-items属性;
    属性值:与align相同,默认值为auto,表示继承父元素容器的align-items属性值;

    展开全文
  • 弹性布局实例骰子

    2020-03-28 09:24:58
    弹性布局实例骰子
  • HTML5 弹性布局

    千次阅读 多人点赞 2021-01-14 16:26:08
    弹性布局      弹性布局相关属性      flex-direction相关属性      flex-wrap相关属性      justify-...

    弹性布局

         弹性布局相关属性
         flex-direction相关属性
         flex-wrap相关属性
         justify-content相关属性
         align-items相关属性
         align-content相关属性
         样例Demo

    弹性布局相关属性

    属性说明
    display值为flex时, 创建弹性布局容器
    flex-direction伸缩流方向
    flex-wrap伸缩流换行
    flex-flow伸缩流(包括方向与换行),综合了flex direction和flex-wrap属性
    justify-content主轴对齐
    align-items侧轴对齐
    align-content堆栈伸缩行,只有在flex-wrap:wrap和wrap-reverse 设置下且伸缩项目存在多行时才生效
    flex用于设置或检索弹性模型对象的子元素如何分配空间,是flex-grow、flex-shrink和flex-basis属性的简写属性,即伸缩性。默认值是0 1. auto
    order设置或检索弹性模型对象的子元素出现的顺序。默认值是0
    flex-grow一个数字,规定项目将相对于其他灵活的项目进行扩展的量,即扩展比率
    flex-shrink一个数字, 规定项目将相对于 其他灵活的项目进行收缩的量,即收缩比率。
    flex-basis项目的长度。合法值“auto”"inherit"或一个后跟“%”‘ px”“ em"或任何其他长度单位的数字,即伸缩基准值



    flex-direction相关属性

    属性说明
    row主轴为水平方向,排列顺序与页面的文档顺序相同
    row-reverse主轴为水平方向,排列顺序与页面的文档顺序相反
    column主轴为垂直方向,排列顺序为从上到下
    column-reverse主轴为垂直方向,排列顺序为从下到上



    flex-wrap相关属性

    属性说明
    nowrap (默认值)值为flex时, 创建弹性布局容器
    wrap伸缩流方向
    wrap-reverse伸缩流换行
    column-reverse伸缩流(包括方向与换行),综合了flex direction和flex-wrap属性



    justify-content相关属性

    属性说明
    flex-start默认值。项目位于容器的开头
    flex- end项目位于容器的结尾
    center项目位于容器的中心
    space-between项目位于各行之间留有空白的容器内
    space-around项目位于各行之前、之间、之后都留有空白的容器内



    align-items相关属性

    属性说明
    stretch默认值。项目被拉伸以适应容器
    center项目位于容器的中心
    flex-start项目位于容器的开头
    flex- end项目位于容器的结尾
    baseline项目位于容器的基线上



    align-content相关属性

    属性说明
    stretch默认值。项目被拉伸以适应容器
    center项目位于容器的中心
    flex-start项目位于容器的开头
    flex-end项目位于容器的结尾
    space-between项目位于各行之间留有空白的容器内space-around



    样例Demo

    效果图:

    在这里插入图片描述
    HTML5 实现:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
    		<title>弹性布局</title>	
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.box{
    				width: 50px;
    				height: 50px;
    				border: 1px solid blueviolet;
    				text-align: center;
    				line-height: 50px;
    			}
    			
    			.flex-item1{
    				
    				background: red;
    				order: 3;/*设置伸缩向的排序*/
    			}
    			.flex-item2{
    				
    				background: green;
    				order: 1;/*设置伸缩向的排序*/
    			}
    			.flex-item3{
    				
    				background: blue;
    				order: 2;/*设置伸缩向的排序*/
    			}
    			
    			.flex-container1{
    				display: flex;
    				flex-direction: row;
    				flex-wrap: wrap;
    				/*主轴对齐*/
    				justify-content: flex-start;
    			}
    			
    			.flex-container2{
    				display: flex;
    				flex-direction: row;
    				flex-wrap: wrap;
    				/*主轴对齐*/
    				justify-content: flex-end;
    			}
    			.flex-container3{
    				display: flex;
    				flex-direction: row;
    				flex-wrap: wrap;
    				justify-content: space-around;
    			}
    			.flex-container4{
    				display: flex;
    				flex-direction: column;
    				flex-wrap: wrap;
    				justify-content: space-around;
    			}
    			
    			
    			.flex-center1{
    				/*伸缩向分配空间格式:flex:flex-grow;flex-fhrink;flex-grow*/
    				/*表示除了占据原先的宽度外,还要分配剩余宽度(包括扩展或收缩)*/
    				flex: 1 1 auto;
    				
    			}
    			
    			.flex-center2{
    				/*表示分配所有宽度(包括扩展或收缩)*/
    				flex-basis: 0%;
    				flex-shrink: 1;
    				flex-grow: 1;
    			}
    		</style>
    		
    	</head>
    	<body>
    		<h3>水平排列</h3>
    		<h5>flex:1 1 auto</h5>
    		<div class="flex-container1">
    			<div class="flex-item1 box">1</div>
    			<div class="flex-item2 box">1</div>
    			<div class="flex-item3 box flex-center1">auto</div>
    		</div>
    		
    		<h5>flex-basis: 0%;flex-shrink: 1;flex-grow: 1;</h5>
    		<div class="flex-container1">
    			<div class="flex-item1 box flex-center2">1</div>
    			<div class="flex-item2 box flex-center2">1</div>
    			<div class="flex-item3 box flex-center2">auto</div>
    		</div>
    		
    		<h5>justify-content: flex-start;</h5>
    		<div class="flex-container1">
    			<div class="flex-item1 box">1</div>
    			<div class="flex-item2 box">1</div>
    			<div class="flex-item3 box">auto</div>
    		</div>
    		
    		
    		
    		<h5>justify-content: flex-end;</h5>
    		<div class="flex-container2">
    			<div class="flex-item1 box">1</div>
    			<div class="flex-item2 box">1</div>
    			<div class="flex-item3 box">auto</div>
    		</div>
    		
    		<h5>justify-content: space-around;;</h5>
    		<div class="flex-container3">
    			<div class="flex-item1 box">1</div>
    			<div class="flex-item2 box">1</div>
    			<div class="flex-item3 box">auto</div>
    		</div>
    	
    		<h3>垂直排列</h3>
    		<div class="flex-container4">
    			<div class="flex-item1 box">1</div>
    			<div class="flex-item2 box">1</div>
    			<div class="flex-item3 box flex-center1">auto</div>
    		</div>
    			
    	</body>	
    </html>
    
    展开全文
  • Flex弹性布局详解

    2018-09-29 16:07:40
    形象生动讲解CSS布局,Flex弹性布局生动形象的理解,更好的理解弹性布局
  • 最详细完整的flex弹性布局

    万次阅读 多人点赞 2020-08-12 00:13:25
    在学习弹性布局之前首先就要明白其概念 flex 就是flexible box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性 任何一个容器都可以指定为flex布局 .box{ display: flex; } 行内元素当然也可以使用flex布局 ...

    初了解

    在学习弹性布局之前首先就要明白其概念
    flex 就是flexible box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性
    任何一个容器都可以指定为flex布局

    .box{
      display: flex;
    }
    

    行内元素当然也可以使用flex布局

    .box{
      display: inline-flex;
    }
    

    Webkit 内核的浏览器,必须加上-webkit前缀。

    .box{
      display: -webkit-flex; /* Safari */
      display: flex;
    }
    

    注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

    基本概念

    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
    在这里插入图片描述
    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
    以上这些基础概念,请务必牢记,下面说属性时,不再重复说明!

    属性

    容器属性(container)

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

    1.flex-direction

    	flex items默认都是沿着main axis(主轴)从main start 开始往main end方向排布
    	flex-direction决定了main axis的方向,有四个取值row(默认值)、row-reverse、column、column-reverse
    
    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    

    row(默认值):主轴为水平方向,起点在左端。
    row-reverse:主轴为水平方向,起点在右端。
    column:主轴为垂直方向,起点在上沿。
    column-reverse:主轴为垂直方向,起点在下沿。

    2.justify-content

    	justify-content决定了flex item在main axis上的对齐方式
    	
    	flex-start(默认值):与main start对齐
    	flex-end:与main end对齐
    	center:居中
    	space-between:flex items 之间的距离相等,与main start、main end两端对齐
    	space-evenly: flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离
    	space-around :flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离的一半
    

    这个属性的目的主要就是为了排列main axis的item位置
    在这里插入图片描述

    在这里插入图片描述
    当然,这些属性你可以自己尝试一下,这里就不再一一尝试了,但是注意,这些都是容器的属性,要写在容器的css中!

    3.align-items

        决定flex items在cross axis上的对齐方式
       
    	normal:在弹性布局中,效果和stretch一样
    	stretch:前提是items不设置高度,当flex items 在cross axis 方向的size为auto时,会自动拉伸至填充flex container(或者换句话说:如果项目未设置高度或设为auto,将占满整个容器的高度。)
    	flex-satrt:与cross start 对齐
    	flex-end:与cross end 对齐
    	center:居中对齐
    	baseline:与基准线对齐
    

    4.flex-wrap

       决定了flex container 是单行还是多行
    	nowrap(默认):单行
    	warp:多行
    	//这个比较少用
    	wrap-reverse:多行(对比wrap,cross start 与cross end相反)
    
    

    默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

    5 align-content

     决定了多行flex items 在cross axis的对齐方式 用法与justify-content相似 一个是横轴。一个控制竖轴
    	stretch(默认值):与align-items的stretch类似,当items有高度的时候,无效果
    	flex-start:与cross start 对齐
    	flex-end :与cross end 对齐
    	center:居中对齐
    	space-between:flex items 之间的距离相等,与cross start、cross end两端对齐
    	space-evently: flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离
    	space-around :flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离的一半
    

    6 flex-flow 是flex-direction与flex-wrap的简写

    也就是说,当你使用这个属性的时候,你可以使用上述两个的属性值,例如:flex-flow: row wrap;(水平排列,多行显示)

    flex 项目属性(item属性)

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

    1 order

        order 决定flex items的排布顺序  (用的不多)
    	可以设置为任意整数(正整数、负整数、0),值越小越排在前面
    	默认值为0
    

    这个属性了解即可,说实话没怎么用过

    2 align-self

        可以通过align-self 覆盖flex container 设置的align-items
    	auto(默认值):遵从flex container的align-items设置
    	stretch、flex-start、flex-end、center、baseline效果与align-items一致
    

    相当于继承父元素的align-items属性,如果没有父元素,则等同于stretch。

    3 flex-grow

        决定了flex items如何扩展
    	可以设置为任意非父数字(小数,整数 0),默认为0
    	当flex container 在main axis方向上有剩余得size时,flex-grow属性才会有效
    	
    	如果所有flex items 的flex-grow 综合sum不超过1,这直接乘以剩余size就是扩展大小、
    	如果超过1 扩展size=剩余size*flex-grow/sum
    

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

    4 flex-shrink

    flex-shrink (shrink 缩小,收缩)与flex-grow相似,一个扩展,一个伸缩 
    	可以设置为任意非父数字(小数,整数 0),默认为1
    	当flex items在main axis 方向上超过了flex container 的size flex-shrink属性才会生效、
    	如果所有flex items 的flex-shrink 总和sum超过1,每个flex item 收缩的size为:
    		flex item 超出flex container 的size*收缩比例/每个flex items 的收缩比例之和
    	如果sum不超过1,每个flex item 收缩的size为:
    		size = 超出的size * flex-shrink值
    	flex items收缩后的最终size不能小于min-width\min-height
    

    有扩大自然就会有缩小,flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。具体的可以自己动手尝试一下哦,最后将会给出一个骰子布局的案例!

    5 flex-basis

    用来设置flex items 在 main axis方向上的base size
    	默认为auto,可以设置具体的宽度数值
    	
    	决定flex items最终base size 的因素,优先级从高到低
    		max-width\max-height\min-width\min-height
    		flex-basis
    		width\height
    		内容本身的size
    

    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目(item)的本来大小。也可以设置跟width,height一样的宽高,表示item将占据固定的空间!

    6 flex

    flex 是flex-grow || flex-shink||flex-basis的简写
    可以指定1 2 3个值 依次按照上述顺序!默认值为 0 1 auto
    
    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
    

    注意:

    1. 该属性的默认值为 0 1 auto(注意顺序),后两个属性可选
    2. 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
    3. 如果需要这三个属性的时候,建议使用flex,而不是单独的三个分离的属性,因为浏览器会推算相关值

    骰子布局实践

    光说不练假把式,手撕代码真功夫!
    下面利用flex写了几个骰子布局,可以参考一下!

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			#container{
    				background-color: #CCCCCC;
    				height: 600px;
    				width: 500px;
    				/* flex */
    				display: flex;
    				justify-content: space-evenly;
    				align-items: center;
    			}
    			.item{
    				background-color: yellow;
    				width: 100px;
    				height: 100px;
    				
    			}
    			/* 单点 */
    			.one{
    				/* 对点使用flex布局 */
    				display: flex;
    				justify-content: center;
    				align-items: center;
    			}
    			/* 点 */
    			.item-one{
    				display: block;
    				height: 20px;
    				width: 20px;
    				background-color: #1890FF;
    				border-radius: 50%;
    			}
    			/* 三点 */
    			.two{
    				
    				display: flex;
    				justify-content: space-between;
    			}
    			.two span{
    				margin: 2px;
    				display: block;
    				height: 20px;
    				width: 20px;
    				border-radius: 50%;
    				background-color: #1890FF;
    			}
    			.two2{
    				align-self: center;
    			}
    			.two3{
    				align-self: flex-end;
    			}
    			/* 五点 */
    			.three{
    				display: flex;
    				justify-content: space-around;
    			}
    			.three span{
    				display: block;
    				height: 20px;
    				width: 20px;
    				border-radius: 50%;
    				background-color: #1890FF;
    			}
    			#three_one, #three_three{
    				padding: 2px;
    				display: flex;
    				flex-direction: column;
    				justify-content: space-between;
    			}
    			#three_two{
    				display: flex;
    				flex-direction: column;
    				justify-content: center;
    			}
    			/* 六点 */
    			.four{
    				display: flex;
    				justify-content: space-around;
    			}
    			.four span{
    				display: block;
    				height: 20px;
    				width: 20px;
    				border-radius: 50%;
    				background-color: #1890FF;
    			}
    			#four1,#four2{
    				padding: 2px;
    				display: flex;
    				flex-direction: column;
    				justify-content: space-between;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			<!-- 一个点居中 -->
    			<div class="item one">
    				<span class="item-one"></span>
    			</div>
    			<!-- 三点 -->
    			<div class="item two">
    				<span class="two1"></span>
    				<span class="two2"></span>
    				<span class="two3"></span>
    			</div>
    			<!-- 五点 -->
    			<div class="item three">
    				<div id="three_one">
    					<span></span>
    					<span></span>
    				</div>
    				<div id="three_two">
    					<span></span>
    				</div>
    				<div id="three_three">
    					<span></span>
    					<span></span>
    				</div>
    			</div>
    			<!-- 六点 -->
    			<div class="item four">
    				<div id="four1">
    					<span></span>
    					<span></span>
    					<span></span>
    				</div>
    				<div id="four2">
    					<span></span>
    					<span></span>
    					<span></span>
    				</div>
    			</div>
    			
    		</div>
    	</body>
    </html>
    
    

    测试结果

    在这里插入图片描述

    这篇文章就到这里了,总结不易,如果对你有所帮助的话,请动动你的小手给我点个赞吧!

    展开全文
  • 弹性布局(flex布局、伸缩布局) 一、什么是弹性布局 flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局 注:当我们为父盒子设置弹性布局后,子...

    弹性布局(flex布局、伸缩布局)

    一、什么是弹性布局

    flexflexible Box 的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局

    注:当我们为父盒子设置弹性布局后,子元素的 floatclearvertical-align 属性将失效

    .box{
      display: flex;
    }
    .box{
      display: inline-flex;
    }
    /*Webkit 内核的浏览器,必须加上-webkit前缀。*/
    .box{
      display: -webkit-flex; /* Safari */
      display: flex;
    }
    

    二、布局原理

    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

        <style>
            div{
                display: flex;
                width: 800px;
                height: 300px;
                background-color: green;
                justify-content: space-around;
                align-items: center;
            }
            div span{  
            	width: 240px;
                height: 150px;
                background-color: greenyellow;
            }
        </style>
    </head>
    <body>
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
    

    在这里插入图片描述

    flex布局的原理:通过给父盒子添加flex属性,来控制盒子的位置和排列方式

    三、父容器常见属性

    1. flex-direction 设置主轴方向(即项目的排列方向)

    在flex布局中,是分为主轴和交叉轴两个方向

    • 默认主轴方向就是x轴方向,水平向右
    • 默认交叉轴方向就是y轴方向,水平向下

    主轴方向是可以通过flex-direction设置的,交叉轴始终垂直主轴。

    属性值说明
    row(默认值)主轴为水平方向,起点在左端(从左到右)
    row-reverse主轴为水平方向,起点在右端(从右到左)
    column主轴为垂直方向,起点在上沿(从上到下)
    column-reverse主轴为垂直方向,起点在下沿(从下到上)

    2. justify-content 设置项目在主轴上的排列方式

    属性值说明
    flex-start(默认值)从头部开始(如果x是主轴,则从左到右)
    flex-end从尾部开始排列
    center在主轴居中对齐(如果主轴是x,则水平居中)
    space-around平分剩余空间
    space-between先两边贴边 再平分剩余空间(最常用)

    图示:为了看得更方便加了边框

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

    3. flex-wrap 设置项目是否换行

    默认情况下,项目都排在一条轴线上,flew-wrap属性定义,flex布局中默认是不换行的,如果装不下会缩小子元素的宽度

    属性值说明
    nowrap默认值,不换行
    wrap换行
    wrap-reverse换行,第一行在下方

    4. align-items 设置交叉轴上的子元素排列方式

    假设交叉轴从上到下;在子项为单行的时候使用

    属性值说明
    flex-start(默认值)交叉轴的起点对齐(从上到下)
    flex-end交叉轴的终点对齐(从下到上)
    center交叉轴的中点对齐(挤在一起居中)
    stretch如果项目未设置高度或设为auto,将占满整个容器的高度(拉伸)
    baseline项目的第一行文字的基线对齐

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

    5. align-content 设置交叉轴上的子元素排列方式(多行)

    设置子项在交叉轴排列方式并且只能用于多行子项(单个项有宽度,一行放不下时,换行:flex-wrap:wrap;),单行子项下是没有效果的

    属性值说明
    flex-start(默认值)在交叉轴的头部开始排列
    flex-end在交叉轴的尾部开始排列
    center在交叉轴中间显示
    space-around子项在交叉轴平分剩余空间
    space-between子项在交叉轴先分部在两头,在平分剩余空间
    stretch设置子项元素高度平分元素高度

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

    在这里插入图片描述

    align-items和align-content区别
    • align-items适用于单行的情况下
    • align-content适用于多行(子项有宽度一行放不下换行时)的情况(单行是无效的)

    6. flex-flow 复合属性

    flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

    .box {
      flex-flow: row wrap;
    }
    

    总结

    • flex-direction:设置主轴方向
    • justify-content:设置主轴上的子元素排列方式
    • flex-wrap:设置子元素是否换行
    • align-items:设置交叉轴上的子元素的排列方式(单行)
    • align-content:设置交叉轴上的子元素的排列方式(多行)
    • flex-flow:复合属性,flex-direction属性和flex-wrap属性的简写形式

    四、子项常见属性

    1. flex属性

    ​ flex属性定义子项分配剩余的空间,用flex来表示占多少份数

    在这里插入图片描述

    2. align-self属性

    ​ 控制子项这在侧轴上的排列方式,允许单个项目与其他的项目有不一样的对齐方式。可覆盖align-items属性。

    ​ 默认值是auto,表示基础父元素的align-items属性,如果没有父元素,则等同于stretch。

    3. order属性

    ​ 数值越小,排列越靠前,默认为0(通过css oder属性调整盒子的位置)

    4. flex-grow属性

    ​ flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

    5. flex-shrink

    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

    6. flex-basis

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

    展开全文
  • Flex弹性布局简介 Flexible Box 简称Flex,是一种比较灵活高效的网页布局方式。 Flex弹性可以应用于任意的HTML元素,行内元素与块级元素使用弹性布局的方式不一样,如下代码段所示。 //块级元素应用 <div ...
  • css 弹性布局

    2019-10-22 20:45:39
    什么是弹性布局? flex布局,是H5新出的布局方式,主要代替传统float浮动布局。 注意:布局要给父元素设置,子元素按照布局方式排列,他会使块级元素不独占一行。 特点:当没有给弹性布局设置换行时,子...
  • CSS 弹性布局

    2018-02-23 22:10:33
    弹性布局虽然流式布局可以充分利用可用空间,但是,在高分辨率的屏幕上,行仍然会过长,让用户不舒服。相反,在低分辨率的屏幕上,或增加文本的字体大小时,行又变得非常短,内容很零碎。对于这个问题,弹性布局可能...
  • display: flex弹性布局

    2021-10-12 11:43:46
    display: flex弹性布局
  • 弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及...
  • css flex 弹性布局详解

    2020-09-24 19:15:21
    主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 常见布局—弹性布局

    千次阅读 2019-03-27 09:52:13
    在常见的布局中,通常有一部分是固定高度,而其他部分是剩余大小分配的,这种情况我们可以使用弹性布局。 说到弹性布局,就得介绍一下css属性中的弹性盒——display:flex 它分为主轴和交叉轴两个方向,没有固定的...
  • 主要提醒大家注意:在使用弹性布局的时候,如果div内部写的是 中文 ,会导致内部换行,请给换行的div加一个 white-space: nowrap; 属性。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,733
精华内容 18,293
关键字:

弹性布局