• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Flex入门基础,flex布局,容器container的属性

开发技术 开发技术 4小时前 2次浏览

Flex入门基础,flex布局,容器container的属性

1、flex布局如何实现完美居中效果,对于实现完美居中效果来说,可以实现的方法很多大概有三四种,其中flex是其中可行性较高的解决方案。

			.container{
				width:200px;
				height:200px;
				background: cadetblue;
				border: 1px solid #ccc;
				display: flex;
			}
			.item{
				width:50px;
				height: 50px;
				background: #eee;
				margin:auto;
			}
 
	      <div class="container">
			<div class="item">
			item
			</div>
		</div>	

主要代码, display: flex; margin:auto;

将父元素设置为flex,子元素margin设置为auto

2,flex布局对子元素的影响

会将子元素设置为块状元素,display:block,

但是子元素的子元素不会受到影响。

消除了浮动,消除了margin的重叠问题

flex概念的提出,引入了容器和项目的概念
a、容器:若给元素设置了display:flex,即称这是一个容器;

b、项目:容器里边的直接子元素,成为项目。

(2)主轴&交叉轴

a、主轴:在容器当中,项目按一定的方向排列,默认是从左向右;

排列方向即为主轴的方向,在容器内部,主轴方向与容器交集的地方,就是主轴。

b、交叉轴:与主轴垂直的轴。默认的方向是从上向下。

4、容器[container]的属性值

(1)flex-direction

取值:row行排列(float:left——“1-2-3”)、

  column列排列

  row-reverse(类似于float:right——“3-2-1”)

  column-reverse

默认情况下,由左向右,由上向下

功能:决定了主轴的方向。

(2)flex-wrap

取值:nowrap、wrap、wrap-reverse

(wrap-reverse表示换行方向颠倒,即从下向上的换行)

默认情况下,该属性表示换行,即在主轴方向上换行。

a、若默认水平方向(flex-direction:row)从左向右,换行方向:从上往下。

现象:1 2、3 4、5 6(三行两列)

b、若垂直方向(flex-direction:column)从上向下,

现象:1 2/3 4/5 6(三列两行)

功能:控制容器中项目的换行

(3)flex-flow

功能:简化代码。其实它是flex-direction与flex-wrap的合写。

flex-flow:flex-direction flex-wrap;

(4)jusity-content

取值:flex-start、flex-end、center、space-around、space-between

(默认值为flex-start)

space-around值表示容器很大,项目不足以填充整个容器,所以会有一部分空白部分,

此外,around表示环绕,让项目之间有联系。

space-between值表示容器与容器之间的距离相等。

功能:容器内的项目再按主轴方向排列,这个水性决定了项目和项目之间的位置关系,

在主轴方向上有富余的空间(项目的宽度小于容器的宽度),采用space-around/between

注意:主轴方向。

(5)align-items

取值:stretch、flex-start、flex-end、center、baseline

作用:项目在交叉轴(与主轴垂直的轴)方向上摆放的位置。

(6)align-content

取值:stretch、flex-start、flex-end、space-between、space-around

功能:a、当容器中有多行项目(当然,前提是允许换行)时,每一行项目就会产生一根主轴,多行项目就会产生多 个主轴。

  b、这个属性决定这多跟主轴之间的位置关系。

参考:

https://blog.csdn.net/zxy9602/article/details/53132523


程序员灯塔
转载请注明原文链接:Flex入门基础,flex布局,容器container的属性
喜欢 (0)