css felx 弹性布局

CSS Flexbox（弹性盒子模型）是一种用于创建灵活、响应式网页布局的技术，它是 CSS3 中引入的一种新的二维布局模块。Flexbox 可以使元素在容器内根据父容器大小的变化自动调整其位置和尺寸，非常适合构建现代 web 设计中的动态和可适应性强的布局。

主要特点包括：

1. 主轴和侧轴：flex-direction属性决定主轴方向（水平或垂直），main-axis和cross-axis分别指代这两个轴。

2. 基准线：flex-wrap属性控制元素换行，flex-start, flex-end, center等对齐选项基于基准线对齐元素。

3. 自由伸缩：flex-grow, flex-shrink, flex-basis 控制元素如何扩展或收缩以及初始宽度。

4. 对齐：justify-content, align-items 和 align-self 属性用于设置元素在容器内的横向和纵向对齐方式。

5. 弹性容器：display:flex 或 display:inline-flex 将元素定义为弹性容器。

使用 Flexbox，你可以轻松创建诸如响应式导航菜单、网格系统、卡片布局等高度可定制的设计。如果你想知道如何具体应用 Flexbox，这里有几个相关问题供深入学习：

相关问题

前端 父盒子设置display:felx, 弹性布局justify-content: space-between;, 父盒子遍历出来的最后一行,里面的子元素, 需要靠左对齐 ,请问怎么设置

可以在父盒子指定最后一行的样式，将其子元素的对齐方式设置为左对齐。具体代码如下：

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.parent::after {
  content: "";
  flex: auto;
}

.parent > :nth-last-child(-n+2) {
  margin-right: auto;
}

.parent > :last-child {
  margin-right: 0;
}

.parent:last-child > :nth-last-child(-n+2) {
  margin-right: 0;
}

在上述代码中，通过`::after`伪元素在最后一行添加一个自动增长的空白盒子，使得最后一行的所有子元素自动向左对齐。同时，通过`:nth-last-child`伪类选择倒数第二个子元素，将其右侧的`margin-right`设置为`auto`，可以让最后一行的子元素在父盒子的剩余空间中向左对齐。最后，通过对最后一个子元素的特殊处理，避免了在最后一行出现多余的右边距。

希望能够解决你的问题。

felx布局display属性

Flex布局中的display属性用于定义一个元素是否为Flex容器。当将display属性设置为flex时，该元素将成为一个Flex容器，其子元素将按照Flex布局进行排列。\[1\]

例如，当将display属性设置为flex时，可以使用flex-direction、flex-wrap、justify-content、align-items和align-content等属性来控制Flex容器中子元素的排列方式和对齐方式。\[2\]\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [页面布局-----display:flex详解](https://blog.csdn.net/weixin_46585382/article/details/127326973)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]