css Flexbox布局用法

2025-02-19 技术教程

CSS Flexbox布局模块

在Flexbox布局模块之前，有四种布局模式：
块（block），用于网页中的部分
内联（inline），用于文本
表（table），用于二维表数据
定位（position），用于元素的显式位置
Flexbox布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
注意兼容问题：
webkit内核浏览器应使用前缀-webkit
IE浏览器，可以很好的兼容IE11+版本，对于IE10只有部分可以兼容，且使用时需增加-ms，IE10浏览器中容器定义成弹性伸缩盒时，需使用display: -ms-flexbox

Flexbox元素

要开始使用Flexbox模型，您需要先定义一个Flex容器。
1
2
3
上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Flexbox</title> <style> .flex-container { display: flex; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; } </style></head><body><div class="flex-container"> <div>1</div> <div>2</div> <div>3</div></div><p>flex布局必须有一个父元素，其display属性设置为flex。</p><p>flex容器的直接子元素自动成为flex项。</p></body></html>父元素（容器）

通过将display属性设置为flex，Flex容器变得灵活：

.flex-container { display: flex; }

##Flex容器属性有：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction属性
##flex-direction属性定义容器要在哪个方向上堆叠弹性项目。
1
2
3
上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。 column值堆叠（但从顶部到底部）：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>flexbox</title> <style> .flex-container { display: flex; flex-direction: column; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style></head><body><h2> flex-direction 属性</h2><p> "flex-direction: column;" 垂直堆叠flex项目(从上到下):</p><div class="flex-container"> <div>1</div> <div>2</div> <div>3</div></div></body></html>

column-reverse值堆叠（但从底部到顶部）：

.flex-container { display: flex; flex-direction: column-reverse; }

row值水平堆放（左到右）：

.flex-container { display: flex; flex-direction: row; }

row-reverse值水平堆放（但从右到左）:

.flex-container { display: flex; flex-direction: row-reverse; }flex-wrap属性

flex-wrap属性指定flex项是否应该换行。下面的示例有12个fiex项目，以更好地展示flex-wrap属性。

.flex-container { display: flex; flex-wrap: wrap; }

nowrap值指定Flex项目将不会换行（这是默认值）：

.flex-container { display: flex; flex-wrap: nowrap; }

wrap-reverse值将flex项目倒置：

.flex-container { display: flex; flex-wrap: wrap-reverse; }flex-flow属性

flex-flow属性是用于设置flex-direction和flex-wrap属性的简写属性。

.flex-container { display: flex; flex-flow: row wrap; }

##justify-content属性
justify-content属性用于对齐flex项：
1
2
3
center值中心对齐：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>flex</title> <style> .flex-container { display: flex; justify-content: center; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style></head><body><h2> justify-content 属性</h2><p> "justify-content: center;" 对齐容器中心的伸缩项目:</p><div class="flex-container"> <div>1</div> <div>2</div> <div>3</div></div></body></html>flex应用场景

使用Flex Box制作响应式网站和图库非常方便

CSS Flexbox属性属性描述display指定用于HTML元素的框的类型flex-direction指定flex容器中可伸缩项目的方向justify-content当项目不使用主轴上的所有可用空间时，水平对齐flex项目align-items当项目不使用横轴上的所有可用空间时，垂直对齐flex项目flex-wrap指定是否应该包装flex项(如果在一行上没有足够的空间容纳它们)align-content修改flex-wrap属性的行为。它类似于对齐项，但是它不是对齐flex项，而是对齐flex行flex-flowflex-direction和flex-wrap的简写属性order指定一个flex项相对于同一容器内其他flex项的顺序align-self用于flex项目。覆盖容器的align-items属性flexflex-growth、flex-shrink和flex-base属性的简写属性