三个div呈品字形排列用css3的flex方式怎么写?

html-css020

三个div呈品字形排列用css3的flex方式怎么写?,第1张

既然楼主说是弹性盒，那就用弹性盒的相关术语来进行分析。

首先分析图片，一个大容器中包含三个项目，你会发现单纯的给容器加一个display:flex的声明是不可以的，因为这个声明默认容器内的项目在一行显示，并且不会溢出。

那么我们就需要一个声明让项目遇到容器边界时自动换行，就是flex-wrap: wrap这个声明。

换行之后你会发现项目与容器的边界是挨在一起的，从图中明显可以看出项目div1在主轴上是居中显示的，三个项目在交叉轴上又是居中，那么

justify-content: space-around表示 自动分配距离，每个项目两侧的间隔相等。

align-items: center表示交叉轴居中。

参考代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

html,body{margin:0padding:0}

.box{width:500pxheight:500pxborder:1px solid #faamargin:50px auto

display:flex

flex-wrap: wrap

justify-content: space-around

align-items: center

}

.box div:nth-child(1){width:450pxheight:200pxborder:1px solid #faa}

.box div:nth-child(2){width:200pxheight: 150pxborder:1px solid #faa}

.box div:nth-child(3){width: 150pxheight:100pxborder:1px solid #faa}

</style>

</head>

<body>

<div class="box">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

</body>

</html>

或者第二个参考代码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

html,body{margin:0padding:0}

.box{width:600pxheight:500pxborder:1px solid #faamargin:50px auto

padding:10px

display:flex

flex-wrap: wrap

justify-content: space-between

align-items: center

}

.box div:nth-child(1){width:600pxheight:200pxborder:1px solid #faa}

.box div:nth-child(2){width:260pxheight: 150pxborder:1px solid #faa}

.box div:nth-child(3){width: 200pxheight:100pxborder:1px solid #faa}

</style>

</head>

<body>

<div class="box">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

</body>

</html>

具体操作步骤如下：

一、首先是准备一个HTML文档，接着在HTML中添加一个DIV，并给DIV设置宽高和背景图片。

二、接下来运行页面就可以看到如下图所示的带背景图片的div了。

三、然后在div中包裹文字就可以了，如下图所示。

四、运行页面我们就可以看到图片上显示出文字了，如下图所示，以上就是用CSS往图片上加文字的实现了。

特殊字体一般不是说不能添加，而是考虑到用户电脑上预装的字体有限，所以局限在宋体和微软雅黑两种字体，css属性中有个font属性，例如{font-family:"迷你简菱心"},在装过这个字体的的电脑会有效果，但是再没有装过的电脑可能就是其它字体了，一般会解析为宋体，问题解决一般由两种解决方案。

第一：css3下载字体，代码如下

@font-face

{

font-family:

'自己命名字体名字'

src:

url('字体路径')

src:

url('FileName.eot?#iefix')

format('embedded-opentype'),

/*其它格式*/

url('FileName.woff')

format('woff'),

url('FileName.ttf')

format('truetype'),

url('FileName.svg#FontName')

format('svg')

font-style:

normal

font-weight:

normal

/*设置默认样式*/

}

.aa{font-family:"自己命名字体名字"}

不兼容ie8及以下浏览器

第二：切png图片