父元素添加 display: flex,子元素可以自动的挤压或拉伸。
一、 主轴对齐方式
使用justify-content调节元素在主轴的对齐方式
代码
<!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>主轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* 居中 */
justify-content: center;
/* 间距在弹性盒子(子级)之间 */
justify-content: space-between;
/* 所有地方的间距都相等 */
justify-content: space-evenly;
/* 间距加在子级的两侧 */
/* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
justify-content: space-around;
height: 200px;
margin: auto;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
效果展示图
二、侧轴对齐方式
目标:使用align-items调节元素在侧轴的对齐方式
stretch(默认值):如果子元素未设置高度或设为auto,将占满整个容器。
代码
<!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>侧轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* 居中 */
/* align-items: center; */
/* 拉伸,默认值。
如果弹性容器中的弹性盒子有自己的高度,align-items:stretch就不能对弹性盒子进行拉伸。*/
/* align-items: stretch; */
height: 300px;
margin: auto;
border: 1px solid #000;
}
.box div {
width: 100px;
background-color: pink;
}
/*
重点看这段注释,
由于第一个div盒子,没有设置align-items,默认是stretch。所以被拉伸至父级高度。
由于第二个div盒子,单独设置了align-self:center,所以他保持居中。
第三个div盒子,单独设置了高度,所以它不会被拉伸。
*/
.box div:nth-child(3){
height: 100px;
}
/* 单独设置某个弹性盒子的侧轴对齐方式 */
.box div:nth-child(2) {
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div>1111</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
效果图
三、伸缩比
目标:使用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>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div {
height: 200px;
margin: 0 20px;
background-color: pink;
}
.box div:nth-child(1) {
width: 50px;
}
.box div:nth-child(2) {
/* 占用父级剩余尺寸的份数 */
flex: 3;
}
.box div:nth-child(3) {
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
效果图
四、主轴方向flex-direction
五、flex-wrap(是否换行) align-content(换行之后,各行对齐方式)
flex-wrap:是否换行
flex-wrap:nowrap(不换行) | wrap(向下换) | wrap-reverse(向上换);