flexibleboxdisplay:flexfunction:pagelayout当我们使用弹性布局时，父元素控制子元素的布局方案，不需要计算。这次和之前的排列方向有什么不同？我们没写弹性盒子模型的时候，盒子是从上往下走的。打开柔性盒模型，现在它是从左到右排列的。显示：弹性；打开灵活的盒子模型，所有内部的子元素都不会按照正常的流式布局，而会听从父级的指挥，会按照从左到右的顺序排列。这里默认是display:block-flex;外部块元素，内部弹性盒模型display:block可以写成display:block-block；内部显示为块元素，外部显示为块元素display:inline-block(外部显示为行内元素，内部显示为块元素)。display:flex还有一种写法叫display:inline-flex（对外是inline元素，对内是flexbox模型）。弹性特征是指子元素的盒子是有弹性的。它们从左到右排列。它们可以自动拉伸。如果元素超过一条线的宽度，就会被挤在一起，按比例压缩默认不会断线。因为我不知道换行符在哪里。现在网页上有四个框，四个框从左到右依次排列。大盒子只写display:flex;/*现在打开开发者工具，逐渐缩小我们的bigbox的宽度。压小了。看来这四个小盒子都是有弹性的。这个人可以弯曲和伸展。就是我们的elasticboxmodel*/elasticboxmodel的两个axis1，和elasticboxmodel的轴。这两个轴指的是什么？它们分别指的是元素的排列方向和元素的换行方向。元素的排列方向（默认从左到右）。现在我们的smallbox元素的排列方向在哪里呢？从左到右，元素的排列最多有几个方向？从左到右、从右到左、从上到下、从下到上最多有四个方向。弹性盒模型之所以非常好用，是因为你可以制定规则，让它任意控制元素的排列方向。元素排列方向为主轴方向。如果从左到右是默认方向，那么我们希望它是从右到左。元素的排列方向称为flex-direction1.row(row)水平从左到右2.row-reverse水平反向从右到左主轴方向从右到左变化3.column(列)verticalfromtoptobottom4.column-reverseverticalreversefrombottomtobottom上弹性盒：默认情况下，弹性盒模型的子元素高度与父元素高度相同，子元素相当于一个独家专栏，但默认宽度为0（这里刚好与普通的块级盒模型相反）。元素的环绕方向（默认不环绕）。元素的环绕方向是否可以由主轴的方向决定，元素的排列方向是主轴的方向从左边开始从右边开始排列。换行只有两个可能的方向，向下或向上。如果主轴是垂直的，垂直向上或垂直向下，则只有两种换行方向，一种是向左，一种是向右。所以一个元素的环绕方向可以由主轴的方向决定，最多有三种情况（包括不环绕）。我们用于包装方向的词称为flex-wrap。我们给环绕方向起个名字叫Crossaxisflex-wrap:nowrap（默认没有换行，多余的元素挤在一起）wrap（正常换行，只有右下）
