父标签：display: flex;flex-direction:column;(row为水平方向，column为垂直方向)；子类标签：flex: 1;转载于:https://www.cnblogs.com/zzwlong/p/9598207.html
看到这张图，第一反应用两条hr，再设置hr的border-left/right。然而这并不能实现这样的效果。
当你给hr设置高度的时候，如果不设置border:none，hr看上去变成了一个有着灰色边框的盒子。比如像这样：
height: 15px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></ti
box-
flex
是
css3
新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的
垂直
等高、
水平
均分
、按比例划分。目前box-
flex
属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。
displ
之前用
display
：
flex
;布局的时候是不是都会遇到这种问题，比如一行排四个，但是有六个需要排，这个时候就需要两行，但是第二行的时候就只有两个，所以会发生布局错乱的现象，比如这样justify-content: space-between; 这样justify-content: space-around; 这样justify-content: space-evenly 但是我们所需要的是这样的 代码如下：
okk，完了............
`
display
:
flex
;` 是 CSS 中的一个属性，用于创建一个弹性容器（
flex
container）。这个容器中的子元素（
flex
items）会根据一定的规则排列。它是
CSS3
中新增的特性，用于进行响应式布局。
使用 `
display
:
flex
;` 可以实现以下的功能：
- 设置
flex
容器，使其内部子元素能够进行弹性布局；
- 简化布局，减少使用传统布局方式时需要进行的计算和调整；
- 支持
水平
和
垂直
居中；
- 支持对齐方式的设置；
- 支持弹性盒子的自适应能力。
使用 `
display
:
flex
;` 后，容器内部的子元素可以通过 `
flex
` 属性来控制它们的行为。`
flex
` 属性有三个关键字：`
flex
-grow`、`
flex
-shrink` 和 `
flex
-basis`，它们分别控制子元素的伸缩比例、收缩比例和初始大小。
例如，下面的代码将创建一个
水平
居中的容器，并设置两个子元素
均分
容器的宽度：
```css
.container {
display
:
flex
;
justify-content: center;
.item {
flex
: 1;
需要注意的是，`
display
:
flex
;` 的兼容性较好，但是在一些老版本的浏览器中可能需要添加 `-webkit-` 前缀，例如：
```css
.container {
display
: -webkit-
flex
; /* Safari */
display
:
flex
;
justify-content: center;
