一、flex 组成
margin: 0;
padding: 0;
}
.box {
/* df */
/*
添加了df的这个盒子，叫做弹性容器
特点：
1.默认宽度就是父元素的宽度，高度由内容所撑开
*/
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
.box span {
/*
弹性盒子：就是弹性容器的最近一级子元素
特点：
1.默认宽度由内容所撑开，默认的高度和父元素一样高；
2.弹性盒子没有块级元素，行内块元素，行内元素之分，统统叫做弹性盒子，弹性盒子可以设置宽高;
3.弹性盒子默认不会换行，会沿着主轴方向一行显示；
4.要注意弹性盒子的概念
*/
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
.box a {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<a href="#">123</a>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
二、主轴对齐方式
margin: 0;
padding: 0;
}
.box {
/* df */
display: flex;
/*
主轴方向的对齐方式，也是给弹性容器添加
*/
/* jc flex-start: 从左边开始显示，默认值*/
justify-content: flex-start;
/* flex-end：从右边开始显示 */
justify-content: flex-end;
/* jcc center：在主轴上居中显示 */
justify-content: center;
/* jcsad space-around:将空白空间均分之后，环绕在弹性盒子的两侧---第一个和最后一个弹性盒子与弹性容器之间的距离是弹性盒子与弹性盒子之间的距离的1/2 */
justify-content: space-around;
/* jcsb space-between：空白空间会均分，然后存在于弹性盒子与弹性盒子之间，第一个和最后一个弹性盒子与弹性容器没有距离*/
justify-content: space-between;
/* space-evenly:弹性盒子和弹性盒子之间的距离等于第一个和最后一个弹性盒子与弹性容器之间的距离 */
justify-content: space-evenly;
width: 1000px;
height: 600px;
background: orange;
}
.box div {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
三、侧轴对齐方式
margin: 0;
padding: 0;
}
.box {
/* df */
/*
侧轴控制的是垂直方向的对齐方式 ai
*/
/* 默认值 */
align-items: flex-start;
/* flex-end:结束的地方，下面显示 */
align-items: flex-end;
/* center：垂直居中 aic */
align-items: center;
/* stretch：拉伸(默认值)到弹性盒子与弹性容器高度一样 */
align-items: stretch;
display: flex;
justify-content: center;
align-items: center;
width: 1000px;
height: 600px;
background: orange;
}
.box div {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
.box .hang {
/*
属性值和ai一样的
as是给需要单独控制侧轴方向对齐方式的弹性盒子添加
*/
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div class="hang">航哥哥</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
四、伸缩比
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
/*
伸缩比：flex 给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
*/
.box div {
width: 200px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
/* 需求：李狗蛋吃一份，张三吃两份，张翠华吃三份 */
/* .box .li {
flex: 1;
} */
.box .san {
flex: 1;
}
/* .box .zh {
flex: 1;
} */
</style>
</head>
<body>
<div class="box">
<div class="li">李狗蛋</div>
<div class="san">张三</div>
<div class="zh">张翠花</div>
</div>
</body>
</html>
五、水平垂直居中
/* df */
display: flex;
/* jcc 水平居中 */
justify-content: center;
/* aic 垂直居中 */
align-items: center;
width: 400px;
height: 400px;
background: #6cf;
}
.son {
width: 120px;
height: 120px;
background-color: #0a0;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
