Flexbox 及其属性 - 解释

2025-06-04

Flexbox 及其属性 - 解释

过去，CSS 布局一直是网页设计师的一大痛点。为了创建响应式布局，必须在整个 HTML 中使用多个 div，然后还需要修改 CSS 来适应这种情况。弹性盒布局 (Flexbox) 可以避免这个问题，从而创建响应式布局。以下是 Flexbox 的概念及其工作原理的介绍。

展示

  • 这表示一个弹性容器。
  • 它启用其所有子项的弹性上下文。
  • 它可以是内联的或块的
.div{
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

弹性方向

  • 它定义了弹性的方向，项目放置在弹性容器中。
  • 这是一个单向布局概念。
.container {
 flex-direction: row | row-reverse | column | column-reverse;
}
Enter fullscreen mode Exit fullscreen mode

  • 行（默认）：ltr 中从左到右；从右到左

  • row-reverse：ltr 中从右到左；从左到右

  • 列：与行相同，但从上到下

  • 列反转：与行反转相同，但从下到上

弹性包裹

  • 默认情况下，项目将尝试放在一行中。
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Enter fullscreen mode Exit fullscreen mode
  • nowrap - 所有弹性项目将位于一行
  • 包裹- 弹性项目将从上到下包裹到多行。
  • wrap-reverse - 弹性项目将从下到上换行到多行。

弹性流

  • 它是flex-wrap和flex-direction属性的简写，它们共同定义主容器的横轴
.container {
  flex-flow: column wrap;
}
Enter fullscreen mode Exit fullscreen mode

弹性收缩

  • 它定义了弹性项目相应收缩的能力
.item {
  flex-shrink: 3; /* default 1 */
}
Enter fullscreen mode Exit fullscreen mode

确保负数无效

对齐自身

  • 它允许覆盖弹性项目的默认对齐方式
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Enter fullscreen mode Exit fullscreen mode

对齐内容

  • 当横轴上有额外空间时，这将对齐弹性容器内的线条。
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
Enter fullscreen mode Exit fullscreen mode

命令

.item {
  order: 5; /* default is 0 */
}
Enter fullscreen mode Exit fullscreen mode
文章来源：https://dev.to/dhairyashah/flexbox-properties-3nd3
Devto 翻译
PREV
了解 React 测试库
NEXT
永远不要使用 ELSE 语句，编写更好的代码并成为更好的程序员