Flex布局基础概念及入门实例教程


发布者 ourjs  发布时间 1628754365243
关键字 css  Html5 

flex 布局的基本概念

Flexbox 是一种布局模型。提供了强大的空间分布和对齐能力

一个 flexbox 一次只能处理一个box中的元素布局,按一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout,可以同时处理行和列上的布局。

使用flex layout 设置 display: flex 即可

flex-direction 主轴方向

主轴由 flex-direction 定义,可取4个属性值

  • row
  • row-reverse
  • column
  • column-reverse

效果如下所示:

flex-direction: row
A B C
flex-direction: row-reverse
A B C
flex-direction: column
A B C
flex-direction: column-reverse
A B C

源代码

flex-wrap 多行Flex容器

为了实现多行效果,请为属性flex-wrap添加一个属性值wrap。 现在,如果您的项目太大而无法全部显示在一行中,则会换行显示。 下面的实时例子包含已给出宽度的项目,对于flex容器,项目的子元素总宽度大于容器最大宽度。 由于flex-wrap的值设置为wrap,所以项目的子元素换行显示。若将其设置为nowrap,这也是初始值,它们将会缩小以适应容器,因为它们使用的是允许缩小的初始Flexbox值。 如果项目的子元素无法缩小,使用nowrap会导致溢出,或者缩小程度还不够小。

效果如下所示:

flex-wrap: nowrap
A B C d e
flex-wrap: nowrap; overflow: auto
A B C d e
flex-wrap: wrap
A B C d e

源代码

flex 元素大小控制

为了更好地控制 flex 元素,有三个属性可以作用于它们:

  • flex-grow
  • flex-shrink
  • flex-basis

flex-basis

flex-basis 定义了该元素的空间大小(the size of that item in terms of the space),flex容器里除了元素所占的空间以外的富余空间就是可用空间 available space。 该属性的默认值是 auto 。此时,浏览器会检测这个元素是否具有确定的尺寸。 在下面的例子中, 所有元素都设定了宽度(width)为100px,所以 flex-basis 的值为100px。 红色的设置成了 150px;

flex-basis: 100px
A B C D

源代码

flex-grow

flex-grow 若被赋值为一个正整数, flex 元素会以 flex-basis 为基础,沿主轴方向增长尺寸。这会使该元素延展,并占据此方向轴上的可用空间 (available space)。如果有其他元素也被允许延展,那么他们会各自占据可用空间的一部分。

(box2) flex-grow: 1
A B C D
(box2 和 box3) flex-grow: 1
A B C D
(box2) flex-grow: 0.5
A B C D

源代码

flex-shrink

flex-shrink属性是处理flex元素收缩的问题。如果我们的容器中没有足够排列flex元素的空间,那么可以把flex元素flex-shrink属性设置为正整数来缩小 它所占空间到flex-basis以下。与flex-grow属性一样,可以赋予不同的值来控制flex元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小 数值的同级元素收缩程度更大。

(box2) flex-shrink: 2
A B C D E

源代码

Flex属性的简写

你可能很少看到 flex-grow,flex-shrink,和 flex-basis 属性单独使用,而是混合着写在 flex 简写形式中。 Flex 简写形式允许你把三个数值 按这个顺序书写: flex: flex-grow flex-shrink flex-basis。

(box2) flex: 1 1 auto;
A B C D E

源代码









  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。

  关注我们
扫一扫即可关注我们:
OnceJS

OnceOA