Flex 布局详解
一、入门
1. flex 是什么?
- flex 是 Flexible Box 的缩写,就是弹性盒子布局的意思
2. 为什么我们需要 flex
-
解决元素居中问题
-
自动弹性伸缩,合适适配不同大小的屏幕,和移动端
3.flex 常见术语 三个2
序号
简记
术语
1
二成员
容器和项目(container / item
)
2
二根轴
主轴与交叉轴(main-axis / cross-axis
)
3
二根线
起始线(main/cross-start)与结束线(main/cross-end)
二、容器 container 的属性
外面的大容器的属性的设置
1. flex-direction 主轴方向
2. flex-wrap 主轴一行满了换行
3. flex-flow 1和2的组合
4. justify-content 主轴元素对齐方式
5. align-items 交叉轴元素对齐方式//单行
6. align-content 交叉轴行对齐方式//多行
1.flex-direction 主轴方向
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
display: flex;
height: 600px;
background-color: rgb(219, 219, 219);
}
.container{
flex-direction: row;
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
}
.item{
padding: 100px;
}
</style>
<body>
<div class="container">
<div class="item" style="background-color: antiquewhite;">1</div>
<div class="item" style="background-color: aqua;">2</div>
<div class="item" style="background-color: aquamarine;">3</div>
</div>
</body>
</html>
2. flex-wrap 主轴一行满了换行
nowrap (默认值) 不换行压缩宽度
wrap 换行
wrap-reverses 反向换行
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
display: flex;
h