导读
- Flexbox背景
- 基础概念（重点）
- 弹性容器属性（重点）
- 弹性项目属性（重点）
Flexbox
2017年10月，W3c推荐使用Flexbox模块写布局
在此之前，我们的布局模型有三种
- 流动布局
- 浮动布局
- 定位布局
以上布局的共同点：偏向元素 - 块级元素 ：自上而下
- 行内元素：自左而右
在布局的时候，父元素几乎没有什么掌控力，这句话的意思是说，在布局方面，父元素之间的关系不够紧密
Flexbox的目的
为个种显示设备是屏幕尺寸提供一种更高效是布局方式，来处理元素的布局以及元素之间的空间
核心思想
赋予父元素一种超能力，让父元素具有改变子元素的能力 - 改变子元素的尺寸
- 改变子元素的位置
- 改变子元素的排序
- 改变子元素之间的空白
图片.png
弹性容器- 弹性盒模型他指是一套css属性规则，而不是一个Css属性，具体来说，分为俩组属性 - 弹性盒模型属性
- 弹性项目属性
弹性容器- 被设置了display:flex的元素成为弹性容器。弹性容器对元素有掌控力
弹性项目- 弹性容器的子元素被称为弹性项目、弹性性项目收到父元素的控制
主轴- 弹性项目排列的轴，多个弹性项目从主轴起点向主轴终点排列。
垂直轴- 垂直于主轴的轴就是垂直轴。多行弹性项目沿垂直轴排列。
主轴起点- 多个弹性项目沿主轴分布的起始点。
主轴终点- 多个弹性项目沿主轴分布的终点。
垂直轴起点- 多行弹性项目沿垂直轴分布的起始点。
垂直轴终点- 多行弹性项目沿垂直轴分布的终点。
1.display
[图片上传失败...(image-a543b-1668163573232)]
定义
Display属性用于定义弹性容器。
语法
.container{
display:flex | inline-flex;
}
- flex : 块级弹性容器
- inline-flex: 行内块级弹性容器
2.flex-wrap
[图片上传失败...(image-26bbf7-1668163573232)]
定义：
flex-wrap用于定义折行方式。
语法
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap: 不换行。所有弹性项目显示在一行内。默认值。
- wrap: 向垂直轴终点方向换行。弹性项目根据弹性容器的宽度自动换行。
- wrap-reverse: 向垂直轴起点方向换行。弹性项目根据弹性容器的宽度自动换行。
3.flex-direction
[图片上传失败...(image-5be6db-1668163573232)]
定义
用于设置弹性盒模型的主轴方向。主轴方向就是元素的排列方式。
语法
.container{
flex-direction: row | row-reverse | column | column-reverse
}
- row: 默认值。把主轴设为水平轴。弹性项目从左向右，从上向下排列。
- row-reverse：把主轴设为水平轴。弹性项目从右向左，从上向下排列。
- column：把主轴设为纵轴。弹性项目从上向下，从左向右排列。
- column-reverse：把主轴设为纵轴，弹性项目从下向上排，从左向右排列。
4. justify-content
[图片上传失败...(image-d81c42-1668163573232)]
定义
用于设置弹性项目的排列方式。
语法
.container{
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
}
- flex-start: 弹性项目从主轴起点向终点排列。
- flex-end：弹性项目从主轴终点向主轴起点排列。（顺序不变）
- center : 弹性项目沿主轴居中排列。
- space-between：弹性项目从主轴起点到主轴终点均匀分布。
- space-around：把空白平均分配到弹性项目两侧。
- space-evenly： 把空白平均分配到弹性项目之间。（任意两个弹性项目之间的空白是相等的）
5.align-items
[图片上传失败...(image-33f64f-1668163573232)]
定义
align-items用设置弹性项目沿垂直轴的对齐方式。
语法
.container{
align-items: flex-start | flex-end | center | stretch | baseline
}
- tretch ： 默认值，默认拉伸子元素的高度
- flex-start: 让弹性项目对齐到垂直轴起点。
- flex-end: 让弹性项目对齐到垂直轴终点。
- center：让弹性项目沿垂直轴居中对齐。
- baseline: 让弹性项目对齐到弹性项目的基线。
6. align-content
定义
设置弹性项目沿垂直轴的分布方式/对齐方式。
语法
.container{
align-content: normal | flex-start | flex-end | center | stretch | space-between | space-around |space-evenly；
}
- normal ：弹性
- flex-start: 弹性项目从垂直轴起点向终点排列。
- flex-end：弹性项目从垂直轴终点向垂直轴起点排列。（顺序不变）
- center ：弹性项目沿垂直轴居中排列。
- stretch :弹性项目拉伸高度以适应弹性容器。
- space-between : 弹性项目从垂直轴起点到终点均匀分布。
- space-around： 把空白平均分配到弹性项目两侧。
- space-evenly：把空白平均分配到弹性项目之间。（任意两个弹性项目之间的空白是相等
7.gan 属性
[图片上传失败...(image-c1f860-1668163573232)]
定义
gap属性用控制弹性项目之间的空白大小。注意：该属性仅控制非边缘弹性项目。（不控制第一个和最后一个弹性项目）
语法
.container{
gap: 10px；/*单行：控制水平间距*/
gap: 10px；/*单行：控制水平和垂直间距*/
gap: 10px 20px; /* 水平间距 垂直间距*/
}
如何开启弹性盒模型布局
在父级样式中添加:display: flex;或者display: inline-flex;。其子元素则可按照弹性盒模型的规则进行布局。
flex-wrap
flex-wrap用于定义折行方式。
flex-direction
用于设置弹性盒模型的主轴方向。主轴方向就是元素的排列方式。
gqp
gap属性用控制弹性项目之间的空白大小。注意：该属性仅控制非边缘弹性项目
justify-content 加是t乏
用于设置弹性项目 主轴的排列方式。
align-content
设置弹性项目沿垂直轴的分布方式/对齐方式。
align-items
align-items用设置弹性项目沿行内垂直轴的对齐方式。
