关于前端弹性盒的基础理解

一、弹性盒子

1、什么是弹性盒子？

• 弹性盒子是CSS3的一种新的布局模式。

  引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间

• • 操作方便，布局简单，移动端使用广泛

  • PC端浏览器支持情况较差

  • IE11或更低版本中，不支持或部分支持

  • 在盒模型中较为灵活

• 弹性盒模型的内容包括：弹性容器、弹性子元素——项目

• 原理：为父元素设置flex属性，控制子元素的位置及排列方式

• 应用场景 : 移动端

2、设置弹性盒子——display属性

• display: flex; 将对象作为弹性伸缩盒显示

• display: inline-flex; 将对象作为内联块级弹性伸缩盒显示

• 注意：

将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效

弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高

3、基本概念

• flex容器、项目——弹性子元素

• 默认在容器中有两根轴线

  • 默认主轴方向——x轴方向，水平向右（左侧为主轴起点，右侧为主轴终点）

  • 默认交叉轴方向——y轴方向，水平向下（上方为交叉轴起点，下方交叉轴终点）

  弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

  注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外 一边就是侧轴

4、容器属性——添加弹性容器上

• flex-direction属性：设置主轴的方向，子元素的排列方向

  • flex-direction: row; 默认值，主轴方向为水平方向，起点在左端

  • flex-direction: row-reverse; 主轴方向为水平方向，起点在右端

  • flex-direction: column; 主轴方向为垂直方向，起点在上方

  • flex-direction: column-reverse; 主轴方向垂直方向，起点在下方