弹性盒模型

flexible box

display:flex
作用:页面布局

我们使用弹性布局时父元素控制子元素的布局方案,不需要计算.

这时候和之前的排列方向有什么区别?

我们在没有写弹性盒模型的时候盒子是从上往下排.

开启弹性盒模型现在是从左往右排.

display:flex;
开启弹性盒模型,内部所有的子元素不会按照普通流布局,听从父级的指挥,会按照从左往右依次排列.
这里默认是display:block-flex;对外块元素,对内弹性盒模型
display:block可以写成display:block-block;对内表现为块元素,对外也表现为块元素


display:inline-block(对外表现为行内元素,对内表现为块元素).

display:flex还有另外一种写法叫做display:inline-flex(对外表现为行内元素,对内是弹性盒模型)

弹性特点

1. 指的是子元素盒子具有了弹性.从左往右排列.
2. 可以进行自动伸伸缩.元素如果超出一行的宽度,会挤到一起,等比例压缩
3. 默认不换行.,因为不知道换行朝哪里

现在网页上有四个盒子,四个盒子从左往右依次排列

大盒子只写display: flex;
/*现在打开开发者工具,将我们bigbox的宽度逐渐减小,这怎么回事,这里面小盒子没有换行,自动被挤压了,变小了.
仿佛这四个小盒子都具有了弹性,大丈夫能屈能伸说的就是我们弹性盒模型*/

弹性盒模型的两条轴线

1,弹性盒模型的轴,这两个轴分别指什么呢?

分别指的是元素的排列方向和元素的换行方向

元素的排列方向(默认从左往右)

现在我们的smallbox他们的元素排列方向是朝哪的?从左往右,

那元素的排列方向最多有几个方向?

从左往右,从右往左,从上往下 还有从下往上

最多有四个方向.

弹性盒模型之所以很好用很弹性,你可以去制定规则,让它可以任意控制元素的排列方向,

元素排列方向就是的主轴方向

假如从左往右就是默认方向,那我们想要它从右往左呢,

元素的排列方向叫做flex-direction

1.row(行) 横向从左往右

2.row-reverse 横向的反向 从右往左 主轴的方向变为从右到左

3.column(列) 纵向 从上往下

4.column-reverse 纵向的反向 从下往上

弹性盒子：默认情况下，弹性盒模型的子元素高度与父元素一致,子元素相当于独占一列,

但是默认宽度为0（此处与普通的块级盒模型刚好相反）

元素的换行方向(默认不换行）

1. 那元素的换行方向是不是可以可以由主轴方向决定,
2. 元素排列方向也就是主轴方向从左往右开始排列.
3. 换行方向只可能有两个方向要么是朝下换行要么是朝上换行.
4. 如果主轴方向是竖直方向,竖直向上或竖直向下时.
5. 换行方向也只有两个,一个是向左一个是向右.

所以元素的换行方向是可以由主轴方向决定的,并且最多有三个情况(包括不换行)

我们的换行方向用的单词叫做flex-wrap

我们给换行方向取一个名字叫交叉轴

flex-wrap:nowrap(默认不换行.多出来元素挤在一堆)

wrap(正常换行,只有向右和向下)