21.6CSS弹性布局资源-CSDN文库

共21个文件

html：11个

xml：5个

md：1个

97 浏览量 2023-10-07 12:21:33 上传评论收藏 287KB ZIP 举报

在网页设计领域，CSS（Cascading Style Sheets）弹性布局，又称为Flexbox，是一种用于创建响应式和动态布局的强大工具。21.6 CSS 弹性布局是这个主题的一个重要部分，它允许开发者轻松地调整元素在容器内的排列方式，以适应不同设备和屏幕尺寸。下面将详细阐述Flexbox的相关知识点。一、Flexbox基础概念 1. **Flex容器（Flex Container）**：通过设置`display`属性为`flex`或`inline-flex`，一个元素就能成为Flex容器，它的子元素称为Flex项目。 2. **主轴（Main Axis）**：容器内部，沿着Flex项目排列的方向，通常默认为水平方向，可以通过`flex-direction`属性来改变。 3. **侧轴（Cross Axis）**：与主轴垂直的轴线，用于控制项目的收缩和扩展。二、Flex容器属性 1. **flex-direction**：定义项目沿主轴的排列方向，可选值有`row`（默认）、`row-reverse`、`column`和`column-reverse`。 2. **flex-wrap**：决定项目是否换行。默认值为`nowrap`，可选值有`wrap`（允许换行）和`wrap-reverse`。 3. **justify-content**：控制项目在主轴上的对齐方式，可选值有`flex-start`（左对齐）、`flex-end`（右对齐）、`center`（居中）、`space-between`（两端对齐，项目之间等距）和`space-around`（每个项目两侧等距）。 4. **align-items**：设置项目在侧轴上的对齐方式，可选值与`justify-content`类似。 5. **align-content**：当有多行项目时，控制行在侧轴上的对齐方式，可选值与`justify-content`相同。三、Flex项目属性 1. **flex-grow**：定义项目在主轴上如何分配多余空间的比例，数值越大，占据空间越多。 2. **flex-shrink**：定义项目在空间不足时如何缩小，数值越大，优先缩小。 3. **flex-basis**：设定项目在分配空间前的基础大小，默认值为`auto`，可以是百分比或固定像素值。 4. **align-self**：允许单个项目覆盖`align-items`的设置，控制其在侧轴上的对齐方式。四、应用场景 Flexbox常用于实现以下布局： 1. 响应式设计：自动调整元素大小和位置以适应不同屏幕尺寸。 2. 头部导航栏：让菜单项水平居中或者两端对齐。 3. 页脚：使元素在一行内均匀分布。 4. 列表布局：如卡片式展示，自动填充剩余空间。 CSS弹性布局（Flexbox）提供了一套完善的解决方案，帮助开发者构建更具灵活性和响应性的网页布局。通过理解并熟练运用Flexbox的相关属性，你可以创建出更加高效、美观且适应性强的网页设计。在实际开发中，配合`CSS 弹性布局.eddx`、`21.6 CSS 弹性布局.md`以及`Flexbox`这些资源，可以进一步深入学习和实践Flexbox的使用。

资源推荐

资源详情

资源评论

收起资源包目录

21.6 CSS 弹性布局.zip （21个子文件）

Flexbox

2. sort_by2.html 1KB

3. horizontal_alignment.html 2KB

1. sort_by.html 662B

10. allocate_space.html 834B

0. create_box.html 635B

.idea

box.iml 291B

workspace.xml 5KB

inspectionProfiles

Project_Default.xml 992B

profiles_settings.xml 174B

modules.xml 265B

.gitignore 184B

jsLibraryMappings.xml 192B

7. item_order.html 966B

package.json 217B

6. multi_line_alignment.html 2KB

4. vertical_alignment.html 2KB

5. line_wrapping.html 1KB

9. vertical_alignment2.html 1KB

8. item_spacing.html 686B

CSS 弹性布局.eddx 274KB

21.6 CSS 弹性布局.md 22KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>多行对齐方式</title> <style> .flex-container { display: flex; width: 200px; height: 220px; background-color: #2b2b2d; flex-wrap: wrap; } .flex-item { background-color: #00fbff; width: 50px; height: 50px; margin: 10px; } .flex-start { align-content: flex-start; } .center { align-content: center; } .flex-end { align-content: flex-end; } .space-between { align-content: space-between; } .space-around { align-content: space-around; } </style> </head> <body> <div> <div class="flex-container"> <div class="flex-item"> flex item 1</div> <div class="flex-item"> flex item 2</div> <div class="flex-item"> flex item 3</div> </div> </div> <br> <div class="flex-container flex-start"> <div class="flex-item"> flex item 1</div> <div class="flex-item"> flex item 2</div> <div class="flex-item"> flex item 3</div> </div> <br> <div class="flex-container center"> <div class="flex-item"> flex item 1</div> <div class="flex-item"> flex item 2</div> <div class="flex-item"> flex item 3</div> </div> <br> <div class="flex-container flex-end"> <div class="flex-item"> flex item 1</div> <div class="flex-item"> flex item 2</div> <div class="flex-item"> flex item 3</div> </div> <br> <div class="flex-container space-between"> <div class="flex-item"> flex item 1</div> <div class="flex-item"> flex item 2</div> <div class="flex-item"> flex item 3</div> </div> <br> <div class="flex-container space-around"> <div class="flex-item"> flex item 1</div> <div class="flex-item"> flex item 2</div> <div class="flex-item"> flex item 3</div> </div> </body> </html>

评论收藏

内容反馈