三个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>

flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局，且它使用起来也是十分的方便

首先是要指定flex布局

当我们指定flex布局方式的时候，其属性值 float、clear、vertical-align就失效了

无论是块级元素还是行内元素，当他们指定使用flex布局的时候，就被称为“ 容器 ”（flex container）

他们的子元素自动成为容器成员，被称为“ 项目 ”（flex item）。

flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位

每个容器都有两根轴，分别为水平的 主轴 （main axis）和垂直的 交叉轴 （cross axis）。主轴开始位置为main start，结束位置为main end。交叉轴的开始位置为cross start，结束位置为cross end

容器内的项目都是沿着主轴排列的，这点和块级元素有较大的不同，因为每个块级元素默认是占有一整行的，且排列方式为由上到下排列。

每个项目都占有一定的主轴空间和交叉轴空间，分别被称为main size和cross size

flex布局下，容器和项目都有其各自的属性

决定主轴的方向，即决定项目的排列方向，其属性值有

决定了当一行放不下所有的项目时，其换行与否以及换行方式

定义了项目在主轴上的对齐方式，假设主轴是从左向右的水平排列

定义了项目在交叉轴上的对齐方式，假设交叉轴是从上到下排列

在这里重点说一下上面这两个属性。

这样可以很方便的设置水平垂直居中

另外说一下align-items：baseline这个属性值。如描述，这个属性值是通过文字来进行对齐，而不是每个项目的边界或是中心

在容器内具有多根主轴线时，可以定义这些轴线的对齐方式

align-content属性和justify-content属性，这两者的属性值有较大的相似之处，这是因为，justify-content属性定义的是多个项目在主轴上的对齐方式，而align-content属性定义的是多根主轴在交叉轴上的对齐方式，这两者描述的对象就几乎一致

定义了多个项目的排列顺序，其使用方式和z-index属性值有异曲同工之处，都是指定属性值，属性值为整数。对于order属性，属性值越小，则排列越靠前；对于z-index属性，则属性值越小，就越在底层

设置了项目的放大比例，其默认值为1。

设置了项目的缩小比例，默认值为1。

在分配多余空间之前，为项目定义其占据的主轴空间

用来设置单个项目与其他项目不同的对齐方式，其属性值和align-items的属性的属性值基本一致，不过其默认值为auto，表示继承父元素的属性值。

一、css图片水平居中。

1、利用margin: 0 auto实现图片居中，就是在图片上加上css样式margin: 0 auto 如下：

2、设置imgBox的样式如下：

3、此时的效果如下：（图片在容器内，水平居中）

二、css图片垂直居中。

1、css代码如下，使用flex布局实现。

2、页面代码HTML如下：

3、此时的效果如下：（垂直居中）

三、 css图片水平垂直居中。

1、利用flex布局实现css水平垂直居中，设计css代码如下：

2、Html代码如下：

3、此时的效果如下：（水平垂直居中）

扩展资料：

在容器上使用display: flex来告诉浏览器，这是一个flex布局的开始。然后给所有的item添加一个flex: 1的属性，来表明元素都是flex布局中的内容。

关于flex，最重要的就是要记住他有两条轴线（主轴、交叉轴），绝大部分属性都是依赖于轴线的方向。如下图所示：

这样，容器内的元素会沿着主轴来平分所有的区域，就这样已经实现了一个多列等宽布局。