1. 包括两层class属性
外层.flex-container,内层.flex-item;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹性盒子</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>
2. 外层class .flex-container属性
(1)flex-direction,子元素位置,从左到有,从右到左,从上到下,从下到上;
flex-direction: row | row-reverse | column | column-reverse
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
(2)justify-content,一行内子元素间距,从头开始,后面空白;从尾部开始,前面空白;元素在中间,两边空白;空白在元素间均匀分配;空白环绕元素;
justify-content: flex-start | flex-end | center | space-between | space-around
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
width: 400px;
height: 250px;
background-color: lightgrey;
}
(3)align-items,子元素纵向位置及高度,顶部,底部,居中,baseline?,充满纵向高度
align-items: flex-start | flex-end | center | baseline | stretch
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 400px;
height: 250px;
background-color: lightgrey;
}
(4)flex-wrap,子元素换行,一行显示,换行,向上换行
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 300px;
height: 250px;
background-color: lightgrey;
}
(5)align-content,位置及空白,
align-content: flex-start | flex-end | center | space-between | space-around | stretch
stretch
- 默认。各行将会伸展以占用剩余的空间。flex-start
- 各行向弹性盒容器的起始位置堆叠。flex-end
- 各行向弹性盒容器的结束位置堆叠。center
-各行向弹性盒容器的中间位置堆叠。space-between
-各行在弹性盒容器中平均分布。space-around
- 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。
3. 内层class .flex-item属性
(1)排序,order
(2)纵向对齐,align-self
align-self: auto | flex-start | flex-end | center | baseline | stretch
(3)宽度分配,flex
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
}
(4)margin使用
将剩余的空间放置在元素的右侧
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
}
完美的居中
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}