关键词：
第一个div独占一行占满第二个和第三个并列和第一个div两边的边界对齐效果如下图
既然楼主说是弹性盒，那就用弹性盒的相关术语来进行分析。
首先分析图片，一个大容器中包含三个项目，你会发现单纯的给容器加一个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,bodymargin:0;padding:0;
.boxwidth:500px;height:500px;border:1px solid #faa;margin:50px auto;
display:flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
.box div:nth-child(1)width:450px;height:200px;border:1px solid #faa;
.box div:nth-child(2)width:200px;height: 150px;border:1px solid #faa;
.box div:nth-child(3)width: 150px;height:100px;border:1px solid #faa;
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
或者第二个参考代码如下
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,bodymargin:0;padding:0;
.boxwidth:600px;height:500px;border:1px solid #faa;margin:50px auto;
padding:10px;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.box div:nth-child(1)width:600px;height:200px;border:1px solid #faa;
.box div:nth-child(2)width:260px;height: 150px;border:1px solid #faa;
.box div:nth-child(3)width: 200px;height:100px;border:1px solid #faa;
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html> 参考技术A 浮动就实现了，不用那么麻烦的 参考技术B div2左浮动
div3右浮动
css3弹性盒模型flex快速入门与上手1
...ss3中引入的一种布局方式，可以非常灵活高效控制元素的排列与对齐方式，大多数人称之为弹性布局.二、怎么使用flex?任何一个容器都可以指定为flex布局1#box{2display:flex;3}三、flex的基本术语采用flex布局的元素被称为flex容器(flexco... 查看详情
css3flex布局
...CSS flex布局，下面小编要发车了。一、flex布局中子项排列方式如图：首先要定义（display:flex;）一个父容器是flex弹性模型才能进行我们的下一布操作，其中我们可以看到flex-direction定义了主轴的排列方式row(默认)也就是从左往... 查看详情
div+css3弹性盒子(flexbox)布局
...是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。首先要明白几个概念：主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的方向... 查看详情
弹性布局（flex）(代码片段)
...low：该属性作用于弹性盒容器，用于控制容器内子元素的排列方式和换行方式。该属性是一个复合属性，由flex-direction和flex-wrap。flex-direction：指定弹性盒容器内子元素的排列方向。该属性支持如下属性值：row：横向从左到右排... 查看详情
flex：css3布局利器
实习以来做了三个小控件，都是用的CSS2.1里传统的DIV+CSS布局方式，综合使用position、margin、float、BFC等属性或特性将元素放到指定的位置上。然而面对日益复杂的界面，这些来自于上个时代、主要针对普通文档流的属性越来越力... 查看详情
弹性布局-flex
... 首先flex的出现是为了解决哪些问题呢？一、页面行排列布局像此图左右两个div一排显示可以用浮动的布局方式html部分css部分这种布局有两个缺点1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需... 查看详情
移动端三段式布局（flex方式）
...y:flex; //弹性盒子 flex-direction: column; //垂直排列 height:100%; //容器盒子要有高度 .header height:.48rem; .main flex:1; //占剩余的部分 .footer height:.48rem; 查看详情
CSS3之字形边框是如何制作的？
】CSS3之字形边框是如何制作的？【英文标题】：CSS3Howarezigzaggedbordersmade?【发布时间】：2015-04-0411:47:11【问题描述】：我已经看到很多新网站在图像和div之间具有锯齿形边框。当您在新选项卡中打开图像时，锯齿形不存在，因此... 查看详情
flex布局(代码片段)
...属性；父容器的属性：1.flex-direction 规定了子元素的排列方向: row默认值,从左到右水平排列 row-reverse从右到左水平排列 column从上到下垂直排列 column-reverse从下到上垂直排列divdisplay:flex;flex-direction:row|row-reverse|col... 查看详情
display:flex布局(代码片段)
...于设置元素的布局模式。该属性可以将一个元素的子元素排列为一条线，并通过一些属性来指定排列方向、对齐方式、间距等。具体地说，使用display:flex;可以让一个元素成为flex容器，它的子元素就会成为flex项，参与到flex布局... 查看详情
css3-flex弹性布局之flex属性
...默认值为01auto。后两个属性可选。接下来我们逐一介绍这三个属性:flexgrow属性设置flex容器中的**可用空间**应分配给该项的大小。如果所有同级项目都具有相同的值，则所有项目将获得相同的可用空间份额，否则将根据定义的不... 查看详情
使用 flex order 属性重新排列桌面和移动视图的项目
】使用flexorder属性重新排列桌面和移动视图的项目【英文标题】：Usingflexorderpropertytore-arrangeitemsfordesktopandmobileviews【发布时间】：2017-04-2820:30:09【问题描述】：我在一个容器中有3个div。没有嵌套的div。我正在使用flex和order属性... 查看详情
##弹性盒子属性介绍
...一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。##如何设置一个弹性盒子```如何将一个容器变为弹性容器呢？display:flex|inline-flex```具体的弹性容器属性列表:*flex-direction:弹性容... 查看详情
css3弹性盒子布局(display：flex)
...和x轴相同，交叉轴和y轴相同。弹性盒子默认会按主轴x轴排列。3.“容器”内的属性 （1）盒子内部具有flex特性 .container{display:flex} （2）排列方向：flex-direction：row；（默认情况） .contai 查看详情
css3flex布局（项目）
一、order属性order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。二、flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余... 查看详情
flex布局：flex布局
...局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局在flex布局中，有主轴和侧轴的概念之分，即所谓的行与列，默认的主轴方向是从左往右，... 查看详情
css--flex常用的属性
...前盒子为伸缩盒flex-direction:column把盒子内容垂直从上往下排列row把盒子内容垂直从左往右排列flex-wrap:wrap;如果内容放不下就会换行排列，类似浮动justify-content:space-between;水平对齐方式align-items:center;垂直对齐方式对齐方式（顶部... 查看详情
ios文字排版概念(字符和字形)
...术A字符(Characters)很好理解,一个字母数字汉字加减符号等字形(Glyphs):就是指一个字符可以表现为不同的样子,比如下图,就是指字符A的不同字形字符和字形不是一一对应的,有时候一个字形是由2个字符组成,比如:字形e+字形´=字符... 查看详情