CSS 入门教程(7)：弹性盒子

css 评论

弹性盒子

由于弹性盒子是一个整体模块，而不是单一属性，因此它涉及很多内容，包括其整个属性集。其中一些属性应设置在容器（父元素，称为“弹性容器”）上，而其他属性应设置在子元素（称为“弹性项目”）上。

flex-box-1.png

弹性容器属性

以下是适用于容器的属性列表

这定义了一个弹性容器

1
2
3
.container {
    display: flex;
}

弹性方向

此属性定义弹性项目在弹性容器中的放置方向：

  • row（从左到右）
  • row-reverse（从右到左）
  • column（从上到下）
  • column-reverse（从下到上）
1
2
3
.container {
    flex-direction: row;
}

flex-wrap

默认情况下，所有 flex 项目都会尝试放在一行中。你可以使用此属性更改此设置并允许项目根据需要换行。（wrap、nowrap、wrap-reverse）

1
2
3
.container {
    flex-wrap: wrap;
}

justify-content

这定义了沿主轴的对齐方式。当一行上的所有弹性项目都不可伸缩，或者可伸缩但已达到其最大尺寸时，它有助于分配剩余的额外可用空间。

1
2
3
4
5
6
flex-start    [- - -        ]
flex-end      [        - - -]
center        [    - - -    ]
space-between [-     -     -]
space-around  [ -    -    - ]
space-evenly  [  -   -   -  ]
1
2
3
.container {
    justify-content: flex-start;
}

align-items

这定义了弹性项目在当前行沿横轴的默认布局方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
flex-start
[ ----- ]
[       ]
[       ]

flex-end
[       ]
[       ]
[ ----- ]

center
[       ]
[ ----- ]
[       ]

stretch
[ | | | ]
[ | | | ]
[ | | | ]
1
2
3
.container {
    align-items: flex-start;
}

弹性项目属性

以下是适用于单个项目的属性列表

order

默认情况下，弹性项目按源顺序排列。但是，顺序属性控制它们在弹性容器中的显示顺序。

1
2
3
.item {
    order: 5;
}

flex-grow

这定义了弹性项目在必要时增长的能力

1
2
.item {
  flex-grow: 1;

align-self

这允许为单个弹性项目覆盖默认对齐方式（或由 align-items 指定的对齐方式）。

例如，如果 align-items 设置为 flex-start

1
2
3
[ ----- ]
[       ]
[       ]

将 .item3 设置为：

1
2
3
.item3 {
    align-self: flex-end;
}

将创建此自定义对齐：

1
2
3
[ -- -- ]
[       ]
[   _   ]

相关文章：

WilliamWeb Full Stack developer

致力于网站建设与Web开发。喜欢新事物，关注前后端动态，对新的技术有追求， 做一个优秀的web全栈工程师。