vue3 快速入门 (五) : Flex结构

1. 怎样变成Flex结构

变成Flex容器，只需在容器结构的节点的CSS中，增长display : flex

1. .mylayout {
2.   /* 省略了其他代码 */
3.   display: flex;
4. }

复制代码

2. flex direction : 方向

• row : 以行分列
  
  
  
  
• row-reverse ： 以行反向分列
  
  
  
  
• column ：以列分列
  
  
  
  
• column-reverse ： 以列反向分列
  
  
  
  

3. flex warp : 换行方式

• nowrap ： 沾满一行后换行
  
  
  
  
• wrap ： 沾满一行后不换行
  
  
  
  
• wrap-reverse ： 沾满一行后反向换行
  
  
  
  

4. justify-content : 横向轴，子元素分列方式

• flex-start ： 左对齐（在程度方向结构时）或上对齐（在垂直方向结构时）
  
  
  
  
• flex-end ： 右对齐（在程度方向结构时）或下对齐（在垂直方向结构时）
  
  
  
  
• center ：在主轴上居中对齐。无论是程度方向照旧垂直方向结构，都会使项目围绕容器的中心点举行对齐。
  
  
  
  
• space-between : flex items之间的隔断相当，且第一个项目与容器的起始端对齐，末了一个项目与容器的末端端对齐，容器两头不留任何空间。
  
  
  
  
• space-around ： flex items 会匀称地分布在容器的主轴上，每个项目两侧的隔断相当。
  
  
  
  

5. align-items : 竖向轴，子元素分列方式

• flex-start : 和justify-content同等
  
  
  
  
• flex-end : 和justify-content同等
  
  
  
  
• center : 和justify-content同等
  
  
  
  
• baseline : 以第一行笔墨为基准线举行分列
  
  
  
  
• stretch : 某个元素没有设置高度的时间，会主动布满
  
  
  
  

6. align-content : 行与行之间的分列分布

• flex-start : 当存在多根轴线时，这些轴线会向交错轴的起始位置对齐，即全部行会紧贴在容器的顶部（假如交错轴是垂直方向的话）或左侧（假如交错轴是程度方向的话）。
  
  
  
  
• flex-end ： 当存在多根轴线时，这些轴线会向交错轴的竣事位置对齐，即全部行会紧贴在容器的底部（假如交错轴是垂直方向的话）或右侧（假如交错轴是程度方向的话）。
  
  
  
  
• center ： 当存在多根轴线时，这些轴线会在交错轴方向上居中对齐。
  
  
  
  
• space-between ： 当存在多根轴线时，这些轴线之间的隔断会匀称分配，且第一根轴线与容器的交错轴起始端对齐，末了一根轴线与容器的交错轴末端端对齐。
  
  
  
  
• space-around ： 当存在多根轴线，这些轴线会在交错轴方向上匀称分布，且每根轴线两侧的隔断相当。
  
  
  
  
• stretch ： 当存在多根轴线时，这些轴线会沿着交错轴方向被拉伸，以使得各个flex items可以大概填满整个容器在交错轴方向上的空间。
  
  
  
  

7. 单独控制子项

• order : 子项单独排序
  
  
  
  
• flex grow : 子项怎样分配剩余空出的空间 (一行表现有空余)
  
  
  
  
  
• flax shrink : 子项怎样紧缩空间 (一行表现不下)
  
  
  
  

8. align-self : 单独设置某个子项的位置

• auto : 默认属性
  在这里插入图片形貌
  
• flex-start : 起始位置对齐。
  
  
  
  
• flex-end : 竣事位置对齐
  
  
  
  
• center ：居中对齐
  
  
  
  
• baseline : 基线对齐
  
  
  
  
• stretch : 拉伸对齐
  
  
  
  

9. 额外学习 box-sizing: border-box

box-sizing: border-box; 是一个CSS属性，用于改变元素盒模子的盘算方式。在默认的盒模子（称为“内容盒模子”或content-box）中，元素的宽度和高度只包罗内容地区的巨细，边框（border）和内边距（padding）是在这个尺寸之外额外增长的。这意味着当你给元素添加内边距和边框时，元素的实际宽度或高度会变大，超出了你最初设置的宽度和高度值，大概导致结构题目。
而当你将box-sizing属性设置为border-box时，元素的宽度和高度会包罗内容区、内边距和边框的总宽（高），即边框和内边距不再增长元素的总尺寸。换句话说，当你指定了一个元素的宽度和高度时，这个尺寸已经预先思量了内边距和边框的宽度，因此无论你怎样调解内边距和边框，元素所占据的空间巨细（宽度和高度）保持稳固。
10. vue快速入门系列文

vue3 快速入门 (一) : 情况设置与搭建
vue3 快速入门 (二) : 第一个Vue网页
vue3 快速入门 (三) : vue中的图片路径
Vue3 快速入门 (四) : 使用路由实现页面跳转
vue3 快速入门 (五) : Flex结构
11. 参考

【前端教程】我是flex结构，6分钟彻底懂我、相识我？