弹性盒模型

弹性盒模型

1.flex—灵活性。采用flex布局的元素，flex容器

2.给装众多相同盒子的父盒子display:flex.

​ 将盒子平均分配宽。它所有的子元素就会自动成为这个容器成员，flex项目。

​ 当所有子元素的宽大于父元素的宽，则子元素的宽由父盒子决定，平均分配宽。

​ 当所有子元素的宽小于父元素的宽，则子元素的宽由子元素决定，。

​ 设置了flex布局之后。子元素的float,clear和certical-align将失效。

3.使用场景：

​ float:会有父级高度塌陷问题

​ inline-block:会 造成空隙问题，基线对齐问题

​ position：若相对定位给不好，结构布局中会造成布局混乱

​ 试用与移动端，

​ 核心理念：父元素控制子元素的布局操作

4.布局重要点：在于元素排列方向，和换行的确定

5.容器本身的属性。主轴和交叉轴的配合使用。

​ （1）主轴：元素的排列方向。flex-dierction:row默认方向向右：

1 2 3 4 5 6 7 8

​

​ flex-dierction:row-reverse 向左

8 7 6 5 4 3 2 1 

​ flex-dierction:column 向下

1
2
3
4
5
6
7
8

​ flex-dierction:column-reverse 向上（最新的在上）

8 
7
6
5
4
3
2
1

​ （2）交叉轴：换行方向（2个值 + 1个不换行（默认值））

​ 代码块中的数字代表对应的盒子

​ flex-wrap: nowrap 不换行

1 2 3 4 5 6 7 8

​ wrap 换行 （要么向下（主轴），要么向右（交叉轴））

1 2 3 4 
5 6 7 8

​

​ wrap-reverse （要么向上，要么向左）

1 2 3 4 
8 7 6 5

总结;坐标轴（方向）：只有我们确定两个轴。后续的布局才会有意义

（3）元素在主轴上的对齐方式；

​ justify-content: flex-start 靠左侧对齐

​ flex-end 靠右侧对齐

​ center 居中对齐

​ space-around 每个项目两侧间隔相等

​ space-between:两端对齐，每个项目之间的间隔相等

（4）元素在交叉轴对齐方式

​ 1.align-items:每行内部元素的排列

​ flex-start 以盒子顶部和左边对齐

​ flex-end 以盒子底部和左边对齐

​ center 盒子左边对齐，平均居中对齐

​ baseline 文字基线对齐

​ 2.align-content:换行的这几行元素的对齐方式（每一行看成一个整体，只有一行不起作用）

​ flex-start

​ flex-end

​ center

​ space-around :每个行两侧间隔相等

​ space-between：两端对齐，每个行之间的间隔相等

​ (5)排序。order.

​ order:值越小越在最后面。如order:1,则该盒子排列在最后面

​ （6）分配容器的多余空间。flex-grow.

​ 单个给 每个项目设置—放大某个项目：

​ 默认值为0.

​ （7）收缩。flex-shrink:默认值为1，默认收缩自己

​ flex-shrink:0 不收缩，该咋样就咋样

​ 值为2,3,4.。。时，才有意义

​ 压缩比例：元素不换行 被挤压，谁大谁被压缩的厉害

​ (8) 主轴上项目的默认长度。flex-basis:

​ auto:由内容决定宽

（8）以上三个属性的复合写法：flex:flex-grow flex-shrink flex-basis. 一般只需要写 flex:1即可.当涉及到hover有压缩效果时，可设置：flex：1 1 auto.

​ （9）align-self:允许单个项目与其他项目有不一样的对齐,可以覆盖align-items属性。给单个项目对齐方式，即可改变它的位置。

​ flex-start

​ flex-end

​ center

​ baseline

6.主轴与交叉轴的复合写法。flex-flow：flex-direction flex-wrap;

7.例做一个4*2的弹性布局[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2HFzCnYq-1582010355202)(C:\Users\dell\Desktop\web前端\笔记%3WH)]XD9D025GA)5ZPQ34KQ.png)

ul{
 display:flex;
 flex-flow：row wrap;
 justify-content:space-between;  //元素在主轴上对齐，两端对齐，每个项目之间的间隔相等  
 align-content:space-between; //换行的这几行元素的对齐方式,两端对齐，每个行之间的间隔相等
width：1000px;
height:610px;
margin:100px auto 0;
box-shadow:0 0 3px inset red;
}
li{
  width:240px;
  height:300px;
  box-shadow:0 0 3px inset red;
}