一、弹性盒子的定义
弹性盒子（ Flexible Box 或 flexbox）：CSS3的一种新布局模式。
是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
二、flex-direction属性：决定主轴的方向（即项目的排列方向）
row（默认值）：主轴为水平方向，起点在左端；
row-reverse：主轴为水平方向，起点在右端；
column：主轴为垂直方向，起点在上沿；
column-reverse：主轴为垂直方向，起点在下沿。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 500px;
height: 500px;
background-color: #E83E78;
display: flex;
/*flex-direction: row; 水平方向，起点在左边;
flex-direction: row-reverse; 水平方向，起点在右边;
flex-direction: column; 垂直方向，起点在上边;
flex-direction: column-reverse; 垂直方向，起点在下边。
*/
}
.box .box1{
width: 200px;
height: 200px;
}
.box .box1:nth-of-type(1){
background-color: #FFC0CB;
}
.box .box1:nth-of-type(2){
background-color: #f0f;
}
.box .box1:nth-of-type(3){
background-color: #00f;
}
</style>
<title>弹性盒子</title>
</head>
<body>
<div class="box">
<div class="box1">项目1</div>
<div class="box1">项目2</div>
<div class="box1">项目3</div>
</div>
</body>
</html>
三、flex-wrap属性：
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
nowrap（默认）：不换行；
wrap：换行，第一行在上方；
wrap-reverse：换行，第一行在下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0px;
}
.box{
display: flex;
width: 500px;
height: 500px;
background-color: #E83E78;
/*flex-wrap: nowrap; 不换行;
flex-wrap: wrap; 换行，第一行在上方;
flex-wrap: wrap-reverse; 换行，第一行在下方。*/
}
.box .box1{
width: 200px;
height: 200px;
}
.box .box1:nth-of-type(1){
background-color: #FFC0CB;
}
.box .box1:nth-of-type(2){
background-color: #f0f;
}
.box .box1:nth-of-type(3){
background-color: #00f;
}
.box .box1:nth-of-type(4){
background-color: #ff0;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子1</div>
<div class="box1">盒子2</div>
<div class="box1">盒子3</div>
<div class="box1">盒子4</div>
</div>
</body>
</html>
四、flex-flow属性：
是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；
五、justify-content属性：定义了项目在主轴上的对齐方式。
flex-start（默认值）：左对齐；
flex-end：右对齐；
center： 居中；
space-between：两端对齐，项目之间的间隔都相等；
space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0px;
}
.box{
display: flex;
width: 500px;
height: 500px;
background-color: #E83E78;
/*justify-content: flex-start; 左对齐;
justify-content: flex-end; 右对齐;
justify-content: center; 居中;
justify-content: space-between; 两端对齐，项目之间的间隔都相等;
justify-content: space-around; 每个项目两侧的间隔相等。
*/
}
.box .box1{
width: 200px;
height: 200px;
}
.box .box1:nth-of-type(1){
background-color: #FFC0CB;
}
.box .box1:nth-of-type(2){
background-color: #f0f;
}
.box .box1:nth-of-type(3){
background-color: #00f;
}
.box .box1:nth-of-type(4){
background-color: #ff0;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子1</div>
<div class="box1">盒子2</div>
<div class="box1">盒子3</div>
<div class="box1">盒子4</div>
</div>
</body>
</html>
六、align-items属性：定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：与交叉轴的中点对齐;
stretch（默认值）：轴线占满整个交叉轴。
baseline 与第一行文字基线对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0px;
}
.box{
display: flex;
width: 500px;
height: 500px;
background-color: #E83E78;
align-items: flex-start; 交叉轴的起点对齐；
align-items: flex-end; 交叉轴的终点对齐；
align-items: center; 与交叉轴的中点对齐；
align-items: stretch; 轴线占满整个交叉轴
align-items: baseline 与第一行文字基线对齐
}
.box .box1{
width: 200px;
height: 200px;
}
.box .box1:nth-of-type(1){
background-color: #FFC0CB;
}
.box .box1:nth-of-type(2){
background-color: #f0f;
}
.box .box1:nth-of-type(3){
background-color: #00f;
}
.box .box1:nth-of-type(4){
background-color: #ff0;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子1</div>
<div class="box1">盒子2</div>
<div class="box1">盒子3</div>
<div class="box1">盒子4</div>
</div>
</body>
</html>
七、align-content属性：定义了多根轴线的对齐方式；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0px;
}
.box{
display: flex;
width: 500px;
height: 500px;
background-color: #E83E78;
align-content: flex-start; 交叉轴的起点对齐；
align-content: flex-end; 交叉轴的终点对齐；
align-content: center; 与交叉轴的中点对齐；
align-content: space-between; 与交叉轴两端对齐，轴线之间的间隔平均分布；
align-content: space-around; 每根轴线两侧的间隔都相等
align-content: stretch; 轴线占满整个交叉轴
}
.box .box1{
width: 200px;
height: 200px;
}
.box .box1:nth-of-type(1){
background-color: #FFC0CB;
}
.box .box1:nth-of-type(2){
background-color: #f0f;
}
.box .box1:nth-of-type(3){
background-color: #00f;
}
.box .box1:nth-of-type(4){
background-color: #ff0;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子1</div>
<div class="box1">盒子2</div>
<div class="box1">盒子3</div>
<div class="box1">盒子4</div>
</div>
</body>
</html>
八、弹性盒子项目属性
属性 描述
flex-grow 设置或检索弹性盒子元素的扩展比率.
flex-shrink 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex
设置弹性盒子的子元素如何分配空间。
flex-basis 用于设置或检索弹性盒伸缩基准值
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性
order 设置弹性盒子的子元素排列顺序。
1、order属性
语法：.flex-container .flex-item { order: 值; }
值：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。
2、flex-grow属性
语法： .flex-container .flex-item { flex-grow:值; }
值：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
3、 flex-shrink属性
语法： .flex-container .flex-item { flex-shrink: 值; }
值：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
4、 flex-basis属性
语法： .flex-container .flex-item { flex-basis: 值 | auto; }
值：一个长度单位或者一个百分比，规定元素的初始长度。
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。
5、flex属性
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
6、align-self属性
语法：.flex-container .flex-item {
值： align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}
值 描述
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。stretch元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
baseline 元素位于容器的基线上。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
