box-sizing、overflow、resize、display、flex

box-sizing

原先说的盒子
margin
border
padding
content
新盒子的计算方式与之不同

旧盒子：boxWidth = width + border2 + padding2; contentWidth = width;
新盒子：boxWidth = width; contentWidth = width - border2 - padding2;

ie6混杂模式盒子模型
box-sizing: border-box;

box-sizing

box-sizing：content-box | border-box;
默认值：content-box;
取值：
content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。

border-sizing: border-box能实现以下需求

第一种：想实现两个div宽度各50%，并且设置了border，padding
适用于宽度不固定，但内边距固定
已知展示的宽度和padding、border，内容区域是后端传递的。

举例input

input宽度设置为100%，但是还是会超出，原因是input自带2pxborder,可使用box-sizing: border-box;。

overflow

overflow：visible | hidden | scroll | auto | clip
取值：

visible：
对溢出内容不做处理，内容可能会超出容器。
hidden：
隐藏溢出容器的内容且不出现滚动条。
scroll：
隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。
auto：
当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。
clip：
与hidden一样，clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于，clip是一个完全禁止滚动的容器，而hidden仍然可以通过编程机制让内容可以滚动。

overflow-* = overflow-x,overflow-y

当overflow-x,overflow-y之一设置为非 visible时另一个属性会自动将默认值visible计算为auto

示例

相关人物介绍的滑动，就是overflow-x: auto;

resize

resize：none | both | horizontal | vertical

默认值：none

该属性用于设置拖拽调整大小。

取值：

none：
不允许用户调整元素大小。
both：
用户可以调节元素的宽度和高度。
horizontal：
用户可以调节元素的宽度
vertical：
用户可以调节元素的高度。

注意：下面两者必须搭配使用

resize: vertical;
overflow: scroll;

对CSS有了解的道友们肯定都知道盒式模型这个概念，对一个元素设置CSS，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。那首先我们就来看一下FC的概念。

　 Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

　 BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC的生成

　　既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
　　看到有道友文章中把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC

详细的见我对BFC的理解

display

box：
将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flex：
将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

display:flex;

此时a位于盒子的正下方；

display:box;和display: inline-box;

此时a位于盒子的右方；

display:flex;和inline-flex;
能使多个内容伸缩到一排；

伸缩盒子

flex 复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
flex-grow 设置或检索弹性盒的扩展比率。
flex-shrink 设置或检索弹性盒的收缩比率
flex-basis 设置或检索弹性盒伸缩基准值。
flex-flow 复合属性。设置或检索伸缩盒对象的子元素排列方式。
flex-direction 设置或检索伸缩盒对象的子元素在父容器中的位置。
flex-wrap 设置或检索伸缩盒对象的子元素超出父容器时是否换行。
align-content 设置或检索弹性盒堆叠伸缩行的对齐方式。
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-self 设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。
justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
order 设置或检索伸缩盒对象的子元素出現的順序。

flex-direction

flex-direction：row | row-reverse | column | column-reverse
默认值是：row
分为主轴和交叉轴
取值：

row：
主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
row-reverse：
对齐方式与row相反。
column：
主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse：
对齐方式与column相反。

下面着两个属性一般是成对写的

display: flex;
flex-direction: row;//默认值

这个弹性盒子现在没有换行，但是有可伸缩功能，可以设置换行功能

flex-wrap 设置换行

flex-wrap：nowrap | wrap | wrap-reverse

nowrap：
flex容器为单行。该情况下flex子项可能会溢出容器
wrap：
flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：
反转 wrap 排列。

多行 flex-wrap: wrap

.wrapper {
    width : 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}

.content {
    width : 100px;
    height: 100px;
    border: 1px solid green;
    box-sizing: border-box;
}

<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
    </div>
</body>

上方代码不加flex-wrap: wrap;六个content会伸缩展示在同一行
加上flex-wrap: wrap;会换行成2行，一行三个content

改成flex-wrap: wrap-reverse;会展示成两行，分别是456123！！

justify-content align-content align-items的区别

justify-content基于主轴，控制了主轴上整个内容是靠左边界，还是靠右边界，还是center，还是均匀分布。

align-content 基于交叉轴，控制垂直方向content的分布，注意必须要搭配flex-wrap:wrap一起使用，否则不论设置什么值都没有作用。是content均往上靠，还是均往下靠，还是居中，还是均匀分布。

align-items 基于交叉轴,控制了交叉轴上，整个内容是靠上边界分布，还是靠下边界分布，还是均匀分布，还是居中，例如，若设置align-items为flex-end;flex-direction默认为row,垂直方向上，最后一样会紧挨父级的底边，即排列是为123，3在第二行，3的底边紧挨父级容器的底边。

align-items 用于单行的垂直方向上的content的分布位置的设置；

align-content 用于多行（必须设置了flex-wrap:wrap）的垂直方向上的content的分布位置的设置；

justify-content

justify-content：flex-start | flex-end | center | space-between | space-around

设置主轴的排列方式，即横轴的排列方式。

默认值：flex-start

flex-start：主轴头对齐,即从头开始平铺内容；
弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
flex-end：主轴尾对齐，即内容以尾对齐；
弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
center：即内容紧挨着以中间对齐；
弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
space-between：即内容分散头对齐，尾也对齐，内容均匀分布，用空隙填充；
弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around：即内容均匀分布，头尾各分二分之一空隙；
弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

注意：center和space-between最常用

align-items 基于交叉轴

align-items：flex-start | flex-end | center | baseline | stretch

默认值：stretch

align-items: center;

内容在该弹性盒子height上居中；

align-items: flex-start/flex-end;

分别在垂直轴上以开头对齐，以结尾对齐；

align-items: baseline;

当弹性盒子内容块中有一个设置了margin让它与其他内容不对齐时，可是使用这个属性，能让其他内容与它对齐。针对第一个内容区的上边界对齐。

align-items: stretch;

正常来说正常来说弹性盒子的内容区不加height内容区被内容撑开
加上align-items: stretch;将内容区撑开，与父级下边界对齐；
但是一旦内容区域中的内容设置了高度，streach就不起作用了，因为优先级不高。

align-items: center;

    flex-wrap: wrap;
    align-items: center;

用上面的语句做多行的垂直方向居中，实现的效果是，多行内容垂直方向均匀分布，上下的空隙是内容区域间空隙的二分之一。

align-content: center;

用于做垂直方向上的居中,实现多行内容垂直方向上紧凑居中

只有作用于多行内容，效果才能显现出来

    flex-wrap: wrap;
    align-content: center;

总结：align-items:center;用于单行的居中；
align-content:center;用于多行的居中；

align-content: flex-end;
多行内容以弹性盒子下底边对齐；

align-content: space-around;

多行内容垂直方向上均匀分布，上下的空隙是内容间空隙的二分之一。
其效果和align-items: center;一致。

align-content: flex-start;
不加这个之前，多行内容区之间是有空隙的，加上这个属性之后，多行内容之间没有空隙，以上边界对齐。

align-content: flex-end;
与flex-start同理，与弹性盒子下边界对齐。

align-content: stretch;
没设置宽高时，该属性自动给各内容设置宽高，使其垂直方向上占满父级。
其效果和align-items: stretch;一致。

单行垂直居中用align-items:center;
多行垂直居中用align-content:center;
水平居中用justify-content:center;

order 是用于排序，谁小将谁排在前面
默认值为0；

内容区中谁的值小，谁排在前面,默认值为0。

<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
    </div>
</body>

.content:first-of-type{
    order: 1;
}

.content:nth-of-type(2){
   order: -1;
}

上面代码的展示顺序为234561；

align-self:flex-end/flex-start;

.wrapper {
    width : 300px;
    height: 600px;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.content {
    width : 100px;
    height: 100px;
    border: 1px solid green;
    box-sizing: border-box;
}
.content:first-of-type{
    align-self: flex-end
}

.content:nth-of-type(2){
   align-self: flex-start;
}

<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
    </div>
</body>

单行内容，父级设置align-items:center;
第一个内容区设置为align-self:flex-end;第二个内容区设置align-self:flex-start;
第一个内容区就以下边界对齐，第二个内容区就以上边界对齐，其他内容区以垂直中间对齐。

如果设置了align-content:center;同样第一个内容区设置为align-self:flex-end;第二个内容区设置align-self:flex-start;那么后面设置的align-self无效.align-content优先级更高些。

注意：flex: flex-grow flex-shrink flex-basis;

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

flex-grow

语法：
flex-grow：<number>
取值：

<number>：
用数值来定义扩展比率。不允许负值

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    width : 600px;
    height: 600px;
    border: 1px solid black;
    display: flex;
    flex-wrap: nowrap;
}

.content {
    width : 100px;
    height: 100px;
    border: 1px solid green;
    box-sizing: border-box;
    flex-grow: 3;
}
.content:first-of-type{
    flex-grow: 1;
}

.content:nth-of-type(2){
   flex-grow: 2;
}

/* 1:2:3将对于的空间以这个比例扩充给这三个内容区 
    剩余300
    第一块宽度：100+ 1/6*300
    第二块宽度：2/6*300
    第三块宽度：3/6*300
*/


<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>

flex-grow是设置在内容区上的，可以设置为0，但不能设置为负值。

flex-grow 伸
flex-shrink 缩
flex-basis 基础

flex-basis

flex-basis会覆盖width的值，

    flex-basis: auto;
     100px;

此时，flex-basis与width对齐。
flex-grow:1;时，以flex-basis为基础值。

flex-shrink
收缩，传值为number类型，不能为负值，可以为0，为0时，不收缩；

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    width : 600px;
    height: 600px;
    border: 1px solid black;
    display: flex;
    flex-wrap: nowrap;
}

.content {
    width : 200px;
    height: 100px;
    flex-shrink: 1;
}
.content:nth-of-type(3){
    400px;
   flex-shrink: 3;
}

/* 1:1:3将对于的空间以这个比例收缩这三个内容区 
    超过200
    200*1 + 200*1 + 400*3 = 1600px

    第一块宽度：200 - 200*1 / 1600 * 200(超出的部分)=175px;
    第二块宽度：200 - 200*1 / 1600 * 200=175px;
    第三块宽度：400 - 400*3 / 1600 * 200=250px;
*/

<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>

弹性盒子的内容区设置有border和padding时，按照公式计算shrink，值是按照内容区域进行比例收缩计算的。

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    width : 600px;
    height: 600px;
    border: 1px solid black;
    display: flex;
    flex-wrap: nowrap;
}

.content {
    width : 200px;
    height: 200px;
    flex-shrink: 1;
    padding: 0 100px;
    box-sizing: border-box;
}
.content:nth-of-type(3){
    400px;
   flex-shrink: 3;
}

/* 
   也就是1和2没有内容区域了，3的内容区域为200px
   按照比例：1:1:3收缩
   超出200px
    0px*1 + 0px*1 + 200px*3=600px;
    0px*1/600px * 200px = 0px;
    0px*1/600px * 200px = 0px;
    200px*3/600px * 200px = 200px;
    
    收缩后，内容区域刚好都减为0；
*/


<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>

(真实内容区的大小)shrink + ... ==加权值

width和flex-basis之间的联系

180px;
内容超过180px，会跑到旁边图形的下方，图形不会扩大也不会换行；
即当内容区域大于width大小，内容区域会超出width,到相邻的div的下方；

当内容大于flex-basis时，宽度会撑大；
flex-basis：

在你设置宽度的时候，如果basis设置有值，且小于width，那么真实的宽度的范围在basis< realWidth<Width
不设置width,只写basis或者basis>width，代表元素的最小宽度，元素真实的宽min-width = basis;

只写basis，代表元素的最小宽度;
width和basis一起设置时，basis --> min-width; width--->max-width;

当不换行内容撑开超过内容区域时，会撑开容器；
无论什么时候，被不换行内容撑开的容器，不会被压缩计算。
被内容撑开的容器不参与压缩值的计算
如果内容区域有不能换行的英文，该容器不参与压缩；
如果它参与需要压缩，要么内容只有中文，要么英文可以换行；

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

取值：

none：
none关键字的计算值为: 0 0 auto
<' flex-grow '>：
用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」
<' flex-shrink '>：
用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」
<' flex-basis '>：
用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

说明：
复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。

如果缩写「flex: 1」, 则其计算值为「1 1 0%」
如果缩写「flex: auto」, 则其计算值为「1 1 auto」
如果「flex: none」, 则其计算值为「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

flex-grow设置为1，就是多余的部分按照1：1来分配；
如果flex-wrap设置为wrap，flex-shrink设置为多少都没有变化，
flex-basis设置为0%，就相当于设置，flex-basis的值为0，当有设置width比如为250px，又设置了flex-basis为0%，就相当于设置了min-width为0，没有内容时，展示的宽度为0，有内容时，展示宽度为实际内容的宽度，当内容宽度大于width的值且不能换行时，设置为显示的宽度固定在250px，内容超出的部分，跑到隔壁容器的下方。
复习：

没有设置width，设置了flex-basis，显示的最小宽度为basis，宽度随着不能换行的内容宽度的增大而增大。
没有设置width，没有设置了flex-basis，显示的宽度为实际内容的宽度；
设置了width，设置了flex-basis，flex-basis<width,相当于设置了min-width为flex-basis，max-width为width;
设置了width，设置了flex-basis，flex-basis>=width,相当于设置了min-width为flex-basis，当其中内容有不可换行的英文时，内容区域宽度仍为flex-basis的值，当需要压缩时，flex-basis的值的值参与正常压缩，该容器宽度最大压缩到width的值；这个是易错点！！！！

如果content排列时需要换行，父级设置了flex-wrap:wrap，换行的min-height为父级的height/3,max-height为content的height;

flex作用

动态居中问题

.wrapper {
    resize: both;
    overflow: hidden;
    width : 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;<!-- 这三句连用实现居中 -->
    justify-content: center;<!-- 这三句连用实现居中 -->
    align-items: center;<!-- 这三句连用实现居中 -->
}

复习默认值：
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
flex-direction: row;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
justify-content: flex-start;
align-self: auto;为父级align-items的值。
order:0;

可以动态增加导航栏
等分布局（4等分，2等分，中间可加margin）

<body>
    <div class="wrapper">
        <div class="item">天猫</div>
        <div class="item">淘宝</div>
        <div class="item">聚划算</div>        
    </div>
</body>

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    resize: both;
    overflow: hidden;
    width : 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;/* 实现其中div水平方向浮动 */
    align-items: center;/* 让导航栏居中显示 */
}

.item{
    flex: 1 1 auto;/* 实现内容等分，以width为基准，grow或shrink */
    text-align: center;/* 实现文字在容器内居中 */
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    color: #f20;
    border-radius: 5px;
}

.item:hover{
    background-color: #f20;
    color: #fff;
}

可以实现需求：希望导航栏不论传过来多少个都可以平分。

其中一个固定宽度的布局（固定一个，固定两个……）
想实现中间固定居中，两边自适应。

<body>
    <div class="wrapper">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
</body>

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    width : 400px;
    height: 200px;
    border: 1px solid black;
    display: flex;
}

.content{
    flex: 1 1 auto;/* 将flex: 0 1 auto;改为flex: 1 1 auto;实现平分 */
    /* margin: 10px;加上margin也能实现等分 */
    height: 100px;
    border:1px solid black;
    box-sizing: border-box;
}

.content:nth-of-type(2){
    flex: 0 0 200px;
}

.content:nth-of-type(3){
    flex: 2 2 auto;
}

上面也实现了不等比例的收缩。
4. 圣杯模式

<body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="contain">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    resize: both;
    overflow: hidden;
    width : 300px;
    height: 300px;
    border: 1px solid black;
    display:flex;
    flex-direction: column;/* 垂直方向上布局 */
}

.header, .footer, .right, .left {
    flex: 0 0 20%;
    border: 1px solid black;
    box-sizing: border-box;
}

.contain {
    flex: 1 1 auto;/* 宽度等于设置的宽度或者实际内容的宽度 */
    display: flex;
    border: 1px solid black;
    box-sizing: border-box;
}

.center {
    flex: 1 1 auto;
}

注意：flex要有作用的前提是，其父级必须是display: flex;

流式布局

display: inline-block;/多行时，每隔div之间会空一点，每行下面会空一点，因为div中间有空格和回车，触发bfc属性/
float
用flex实现float功能

    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

复习flex

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
flex-grow: 0;flex-grow：<number>
flex-shrink: 1;flex-shrink：<number>
flex-basis: auto;flex-basis：<length> | <percentage> | auto | content
flex-flow：<' flex-direction '> || <' flex-wrap '>; flex-flow:row nowrap;
flex-direction: row; flex-direction：row | row-reverse| column | column-reverse
flex-wrap: nowrap; flex-wrap：nowrap | wrap | wrap-reverse
align-content: stretch; align-content：flex-start | flex-end | center | space-between | space-around | stretch
align-items: stretch; align-items：flex-start | flex-end | center | baseline | stretch
align-self: auto;为父级align-items的值。align-self：auto | flex-start | flex-end | center | baseline | stretch
justify-content: flex-start; justify-content：flex-start | flex-end | center | space-between | space-around
order:0; order：<integer>

练习：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>

<body>
    <div class="wrapper">
        <div class="left">
            <div class="left-header">
                <div class="title">
                    <span>刘德华</span>
                </div>
                <div class="normal">
                    <span>演员、歌手、香港“四大天王”之一</span>
                </div>
            </div>
            <div class="left-text">
                <span>1961年09月27日（57岁）</span>
            </div>
        </div>
        <div class="right">
            <a href="#">
                <div class="right-img"></div>
            </a>
        </div>
    </div>
</body>

</html>

* {
    margin : 0;
    padding: 0;
}

.wrapper {
    width     : 380px;
    height    : 178px;
    border    : 1px solid black;
    box-sizing: border-box;
    margin    : 8px auto;
    padding   : 16px 20px;
    display   : flex;
}

.right {
    flex      : 0 0 108px;
    word-break: break-all;
}

.right a {
    text-decoration: none;
}

.left {
    flex         : 1 1 auto;
    display      : flex;
    flex-flow    : row wrap;
    align-content: center;
    font-weight  : 400;
    color        : rgba(0, 0, 0, .4);
}

.left-header .title {
    font-size  : 24px;
    font-weight: 700;
    color      : #6a6a6a;
}

.right .right-img {
    width           : 100%;
    height          : 100%;
    background-image: url(./liudehua.png);
    background-size : 100%;
}