display:flex;
- 设置弹性盒子,相当好用.其内元素全部排成一行
1. flex-direction 盒子排列方向
- flex-direction: row; 默认row横向
- flex-direction: column; 默认column纵向
2. justify-content 水平对齐方式
- justify-content:center ;居中对齐
- justify-content:flex-start ;左对齐(默认)
- justify-content:flex-end;右对齐
- justify-content:space-around; 分散对齐
- justify-content:space-between 两端对齐
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
height: 100px;
width: 600px;
border: 1px solid;
/* 将div设置为弹性盒子 */
display: flex;
/* 子元素默认水平方向排列 */
/* 左中右 */
justify-content: center;
justify-content: flex-start;
justify-content: flex-end;
/* 两端对齐 */
justify-content: space-between;
/* 分散对齐 */
justify-content: space-around;
}
.box span{
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<!-- 把.box变成弹性盒子, 对其内的元素进行水平方向的排列 -->
<div class="box">
<span style="background:red;">1</span>
<span style="background:gray;">2</span>
<span style="background:red;">3</span>
</div>
</body>
</html>
3. align-items 垂直对齐方式
- align-items:flex-start ;顶部对齐(默认)
- align-items:center 居中对齐
- align-items:flex-end 底部对齐
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
height: 100px;
width: 600px;
border: 1px solid;
display: flex;
/* 垂直对齐方式 */
align-items: center;
align-items: flex-start;
align-items: flex-end;
}
.box span {
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<span style="background:red;">1</span>
<span style="background:gray;">2</span>
<span style="background:red;">3</span>
</div>
</body>
</html>
4. align-self 垂直方向单独设置
- 作用于子元素,允许对某一个元素单独设置
- 使用方法和align-items相同
5. flex-grow剩余空间分配
- flex-grow:x; 盒子内如果有剩余的空间, 可以使用其来进行分配
- 元素设置了flex-grow后才可以参与剩余的空间分配,若元素没有设置flex-grow,则其会保持原来的大小,不会变大
注:span3的宽度 = 它本身的宽度+它分配到的剩余空间
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
height: 100px;
width: 250px;
border: 1px solid;
display: flex;
align-items: center;
}
.box span {
width: 50px;
height: 50px;
background-color: gray;
border: 1px solid blue;
}
.box span:nth-child(2) {
flex-grow: 1;
}
.box span:nth-child(3) {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
6. flex-shink:x;元素压缩
空间不足时, 子元素会被压缩至所有元素都可以放进去
- flex-shrink:0;可以对某一子元素设置,使其不被压缩
- flex-shrink:1;设置后,该子元素于其他子元素一样大小
- flex-shrink:1+;该元素都会比其他小,其数值越大,元素越小
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
height: 100px;
width: 250px;
border: 1px solid red;
display: flex;
align-items: center;
}
.box span {
width: 50px;
height: 50px;
background-color: gray;
border: 1px solid blue;
box-sizing: border-box;
}
/* 设置第一个不缩小 */
.box span:nth-child(1) {
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
</body>
</html>
7. flex-wrap 换行
- flex-wrap:wrap 换行
- flex-wrap:nowrap 不换行
- 对每一个子元素设置大小,使用换行后,父类放不下就会进行换行,不会对元素进行压缩
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 500px;
border: 1px solid;
display: flex;
/* 换行设置 */
flex-wrap: nowrap;
flex-wrap: wrap;
}
.box span {
width: 25%;
height: 50px;
background-color: yellow;
box-sizing: border-box;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
</body>
</html>
8. 为父类设置了高度以后换行用align-content
- 父类拥有高度,换行以后子元素会被分成两行,可能不会达成自己想要的效果,此时运用align-content就会解决这个问题,和align-items用法一致
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 500px;
border: 1px solid;
display: flex;
/* 换行设置 */
flex-wrap: nowrap;
flex-wrap: wrap;
height: 400px;
/* 父元素设置了高度, 需要使用align-content对子元素重新排列 */
align-content: space-around;
}
.box span {
width: 25%;
height: 50px;
background-color: gray;
box-sizing: border-box;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
</body>
</html>
