Flex 布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
起步
设置弹性伸缩盒布局(默认水平排列)
display: flex;
设置方向： row 水平 | row-reverse 水平反向 | column 垂直| column-reverse 垂直反向
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: columncolumn-reverse;
image.png
设置主轴对齐： flex-start 行头紧挨 | flex-end 行尾紧挨 | center 居中 | space-between 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点 | space-around 均匀排列每个元素,每个元素周围分配相同的空间 | space-evenly 均匀排列每个元素,每个元素之间的间隔相等
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
image.png
设置交叉轴: flex-start 底部对齐 | flex-end 底部对齐 | center 居中
align-items: flex-start;
align-items: flex-end;
align-items: center;
image.png
设置换行: nowrap 默认 | wrap 换行 | wrap-reverse 换行反向
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
image.png
参考代码 效果图如上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex弹性伸缩盒布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 300px;
height: 1500px;
margin: 0 auto;
/*height: 600px;*/
/*border: 1px solid #f00;*/
}
.dire {
background-color: #ccc;
}
.dire-row {
display: flex;
flex-direction: row;
}
.dire-row-r {
display: flex;
flex-direction: row-reverse;
}
.dire-column {
flex-direction: column;
}
.dire-column-r {
display: flex;
flex-direction: column-reverse;
}
.just {
background-color: #ccc;
}
.just-s {
display: flex;
justify-content: flex-start;
}
.just-e {
display: flex;
justify-content: flex-end;
}
.just-c {
display: flex;
justify-content: center;
}
.just-sa {
display: flex;
justify-content: space-around;
}
.just-sb {
display: flex;
justify-content: space-between;
}
.just-se {
display: flex;
justify-content: space-evenly;
}
.align {
width: 100%;
height: 60px;
background-color: #ccc;
}
.align-s {
display: flex;
align-items: flex-start;
}
.align-e {
display: flex;
align-items: flex-end;
}
.align-c {
display: flex;
align-items: center;
}
.flex-n {
display: flex;
flex-wrap: nowrap;
}
.flex-w {
display: flex;
flex-wrap: wrap;
}
.flex-w-r {
display: flex;
flex-wrap: wrap-reverse;
}
.item {
width: 20%;
height: 100px;
background-color: pink;
/*border: 1px solid red;*/
box-sizing: border-box;
}
.item-item{
width: 30px;
height: 30px;
background-color: pink;
/*border: 1px solid red;*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrap">
<p>flex-direction: row;</p>
<div class="dire dire-row">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>flex-direction: row-reverse;</p>
<div class="dire dire-row-r">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>flex-direction: column;</p>
<div class="dire dire-column">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>flex-direction: column-reverse;</p>
<div class="dire dire-column-r">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>justify-content: flex-start;</p>
<div class="just just-s">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>justify-content: flex-end;</p>
<div class="just just-e">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>justify-content: center;</p>
<div class="just just-c">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>justify-content: space-around;</p>
<div class="just just-sa">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>justify-content: space-between;</p>
<div class="just just-sb">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>justify-content: space-evenly;</p>
<div class="just just-se">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>align-items: flex-start;</p>
<div class="align align-s">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>align-items: flex-end;</p>
<div class="align align-e">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>align-items: flex-center;</p>
<div class="align align-c">
<div class="item-item">1</div>
<div class="item-item">2</div>
<div class="item-item">3</div>
</div>
<p>flex-wrap: nowrap;</p>
<div class="flex-n">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<p>flex-wrap: wrap;</p>
<div class="flex-w">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<p>flex-wrap: wrap-reverse;</p>
<div class="flex-w-r">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
</body>
</html>
