flex布局

2023-12-31 03:55:39

一些基本的属性:

    • display: 定义容器为 Flex 容器,可以设置为?flex?或?inline-flex
    • flex-direction: 定义主轴的方向(row、row-reverse、column、column-reverse)。
    • flex-wrap: 控制项目换行的方式(nowrap、wrap、wrap-reverse)。
    • justify-content: 定义项目在主轴上的对齐方式(flex-start、flex-end、center、space-between、space-around)。
    • align-items: 定义项目在交叉轴上的对齐方式(flex-start、flex-end、center、baseline、stretch)。
    • align-content: 定义多根轴线的对齐方式(flex-start、flex-end、center、space-between、space-around、stretch)。
    • order: 定义项目的排列顺序。
    • flex-grow: 定义项目的放大比例。
    • flex-shrink: 定义项目的缩小比例。
    • flex-basis: 定义项目占据主轴空间的大小。
    • flex: 简写属性,包括?flex-growflex-shrink?和?flex-basis
    • align-self: 单独定义某个项目在交叉轴上的对齐方式。

2.

  • 主轴(Main Axis):Flex 容器的主要方向,项目默认沿着主轴排列。
  • 交叉轴(Cross Axis):与主轴垂直的方向。
  • justify-content: space-between;使得子元素在主轴上均匀分布,align-items: center;使得子元素在交叉轴上居中对齐。
  • 它使得在一个容器内的子元素能够以弹性的方式布局,从而实现灵活的布局。

?

文章来源:https://blog.csdn.net/m0_47339055/article/details/135311267
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。