详细介绍：css学习盒模型：

目录

css盒模型

弹性盒模型（flex box)

1.display属性

2.flex_direction属性

3.align-items属性

4.flex-grow/flex

---

css盒模型

CSS 把每个元素看作一个矩形“盒子”，由四层构成：内容区 content、内边距 padding、边框 border、外边距 margin。其中外边距是透明的，用于与其他元素拉开距离。

可以点开一个网页右键’检查‘，右侧看到

---

先只设置内容content

		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}

添加一个padding :50px 10px;可以看到他相对四周边框在变化（margin/padding/border-width：四值顺序为 上 右 下 左；三值：上 左右 下；两值：上下 左右；单值：四边相同。)

添加一个border: 5px solid black;

增加一个margin:50px 10px;四周会是透明的

弹性盒模型（flex box)

是css3的一种新的布局模式，弹性盒模型就是为了适应不同屏幕大小，可以更好的调整布局。(一个大盒子里面有很多小盒子）

组成：弹性容器和弹性项目

• 弹性容器（Flex Container）：通过 display: flex或 display: inline-flex定义的父元素，其直接子元素自动成为 弹性项目（Flex Items）。

• 弹性项目（Flex Items）：容器的子元素，可以灵活调整大小、顺序和对齐方式。

​
   #弹性项目设置了3个
 

        
flex item1
        
flex item2
        
flex item3
    
#弹性容器
	
	
	
	

1.display属性

display: flex开启弹性盒，默认水平放置

2.flex_direction属性

可以指定子元素在父容器的位置（小盒子在大盒子里面怎么摆放）

语法：

.flex-container {
  flex-direction: row;      /* 默认：水平（左→右） */
  flex-direction: row-reverse; /* 水平（右→左） */
  flex-direction: column;   /* 垂直（上→下） */
  flex-direction: column-reverse; /* 垂直（下→上） */
}

3.align-items属性

控制 子元素在交叉轴（默认垂直方向）上的对齐方式：

.flex-container {
  align-items: stretch;     /* 默认：拉伸填满容器高度（若未设高度） */
  align-items: flex-start;  /* 交叉轴起点对齐（顶部对齐）（就是居左摆放） */
  align-items: flex-end;    /* 交叉轴终点对齐（底部对齐）（居右摆放） */
  align-items: center;      /* 交叉轴居中（上下左右都居中） */
  align-items: baseline;    /* 按文本基线对齐（较少用） */
}

4.flex-grow/flex

定义子元素如何 分配剩余空间（默认 0，不放大）：

就是按照小盒子占整个大盒子的多少比例放大。假设我想红色盒子占3/5，其他盒子占1/5