在Flexbox布局模块之前,有四种布局模式:
块(block),用于网页中的部分
内联(inline),用于文本
表(table),用于二维表数据
定位(position),用于元素的显式位置
Flexbox布局模块,可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。
注意兼容问题:
webkit内核浏览器应使用前缀-webkit
IE浏览器,可以很好的兼容IE11+版本,对于IE10只有部分可以兼容,且使用时需增加-ms,IE10浏览器中容器定义成弹性伸缩盒时,需使用display: -ms-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项是否应该换行。下面的示例有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-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 Box制作响应式网站和图库非常方便
属性 | 描述 |
---|---|
display | 指定用于HTML元素的框的类型 |
flex-direction | 指定flex容器中可伸缩项目的方向 |
justify-content | 当项目不使用主轴上的所有可用空间时,水平对齐flex项目 |
align-items | 当项目不使用横轴上的所有可用空间时,垂直对齐flex项目 |
flex-wrap | 指定是否应该包装flex项(如果在一行上没有足够的空间容纳它们) |
align-content | 修改flex-wrap属性的行为。它类似于对齐项,但是它不是对齐flex项,而是对齐flex行 |
flex-flow | flex-direction和flex-wrap的简写属性 |
order | 指定一个flex项相对于同一容器内其他flex项的顺序 |
align-self | 用于flex项目。覆盖容器的align-items属性 |
flex | flex-growth、flex-shrink和flex-base属性的简写属性 |
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。