flex布局:
步骤:
-
设置div变成flex盒子 弹性flex、
display:flex;
div的子元素发生一些改变
- 设置flex的盒子 称之为父项
- 盒子里的子元素 称之为子项
具体变化:
-
不再区分块级 行内快 行内元素,全都可以设置宽高度
-
子项默认的宽高度:宽度 由内容撑开 高度 等于父项的高
-
子项
使用浮动没有效果 无效
使用定位、margin、transform都有效
4.默认情况下 子项总宽度大于父项的宽也不会换行!!!
flex不会换行 只会压缩自身的宽度而已
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin: 50px auto;
display: flex;
width: 600px;
height: 600px;
border: 1px solid red;
justify-content: center;
}
span {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<span>
1
</span>
</div>
</body>
</html>
对齐方式:水平对齐 justify-content:
- 左对齐:flex-start
- 右对齐:flex-end
- 居中对齐:flex-center
- 先两侧对齐,后间隔均匀分开:space-between sb
- 间隔存放,两侧控件小于中间:space-around sd
- 绝对平均:space-evenly sv
对齐方式:垂直对齐
1.单行 align-items:
- align-items:flex-start 上对齐
- align-items:flex-end 下对齐
- align-items:center 垂直居中
2.多行 align-content:
- align-content:flex-start 上对齐
- align-content:flex-end 下对齐
- align-content:center 垂直居中
- align-content:space-between sb 上下拉满 剩余空格平分
- align-content:space-around sd 左右小间隔 中间大间隔
- align-content:space-evenly sv 空格均匀平分
换行 flex-wrap:
flex-wrap:nowrap(默认值) 不会换行,排满压缩
flex-wrap:wrap 一行排满自动换行
转换主轴 x y flex-direction:
1.主轴为x轴:
- row 默认值 左到右
- row-reverse 右到左
2.主轴为y轴:
- columu 常用 上到下
- columu-reverse 下到上
子项
特点
- 默认的宽度等于内容撑开
- 默认的高度 等于父项的高
- flex:1 设置子项的宽度
- align-self 设置子项在侧轴上的对齐
- 主轴方向改了 column
**flex ** 设置子项占父项的宽(高度)的比例 例:flex:1;
align-self 设置子项自己在侧轴的对齐方式
- flex-start 左(上)对齐
- flex-end 右(下)对齐
- center 中间对齐