侧边栏壁纸
博主昵称
404

  • 累计撰写 17 篇文章
  • 累计收到 0 条评论

Flex

404
404
2022-08-03 / 0 评论 / 1 阅读 / 正在检测是否收录...

说明

flex 布局是CSS3中新增加的一套布局方案,属于一维布局模型。flex提供了强大的空间分布和对齐能力。
想要理解和使用flex进行网页布局,需要先来学习和理解下面的几个概念:
flex的两根轴线: 主轴和交叉轴
flex容器和flex子元素

基本概念的解释

flex的两根轴线
当使用flex进行布局的时候,首先需要了解的,就是flex的两根轴线:主轴和交叉轴。
为什么一定要理解这两个轴线呢,因为所有的flex属性都和这两根轴线有关系。
20201128163212.png
一般来说,元素在容器内部排列的顺序都是按照从左向右的顺序来进行排列的,而在flex中,决定元素排列的是主轴。
默认情况下flex中主轴上的元素排列方式和非flex情况下是一样的。
flex的特性,就是元素沿着主轴或者交叉轴进行排列。

flex容器和flex子元素

想要使用flex布局方案,需要在容器属性上使用display:flex或者display:inline-flex。
而一旦设置了任意一个属性,那么这个标签就变成了flex容器,也可以称之为是弹性容器。
而相对应的,容器当中的子元素就变成了flex子元素也就是弹性子元素。
20201128164458.png

flex 的相应属性分类

想要更高的学习和使用flex布局,需要了解flex中包含的属性。一般来说,flex的属性可以分成两类:
flex容器属性(flex-container)
flex子元素属性(flex-item)
所谓的flex容器属性就是将属性设置在flex容器上,而flex子元素则是将属性设置在子元素的身上。

flex容器属性

flex-direction
通过flex-direction属性,可以设置主轴的方向,它包括下面的几个值:

row(默认值): 主轴为水平方向,项目排列起点在左端。
row-reverse: 主轴为水平方向,起点在右端。
column: 主轴为垂直方向,起点在上沿。
column-reverse: 主轴为垂直方向,起点在下沿。
实际的效果:
20201128171054.png

0

评论 (0)

取消