乐趣区

弹性盒模型

jiezi

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(正常换行, 只有向右和向下)

退出移动版