Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 任何一个容器都可以指定为 Flex 布局。
语法：display : flex;
display : -webkit-flex;（加上前缀便于浏览器识别）
行内元素也可以使用 Flex 布局。 display: inline-flex; 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
容器的属性
flex-direction 决定主轴的方向（即项目的排列方向）
row（默认值） 主轴为水平方向，起点在左端。
row-reverse 主轴为水平方向，起点在右端。
column 主轴为垂直方向，起点在上沿。
column-reverse 主轴为垂直方向，起点在下沿
justify-content 主轴的对齐方式
flex-start（默认值）左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔都相等。
space-around 每个项目两侧的间隔相等。所以， 项目之间的间隔比项目与边框的间隔大一倍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
display: flex;
/* 主轴方向的对齐方式 */
/* justify-content: flex-start; 左对齐 */
/* justify-content: flex-end; 右对齐 */
/* justify-content: center; 居中对齐 */
/* justify-content: space-between; 每两个项目之间的距离相等 */
/*justify-content: space-around; 每一个项目两侧的距离相等 */
/* justify-content: space-evenly; 每两个项目之间的距离 与 边沿项目距离容器之间的距离相等 */
width: 500px;
height: 500px;
background-color: #ccc;
}
.box .item{
width: 100px;
height: 100px;
}
.box .item:nth-of-type(1){
background-color: #f00;
}
.box .item:nth-of-type(2){
background-color: #0f0;
}
.box .item:nth-of-type(3){
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
</body>
</html>
align-items 交叉轴轴的对齐方
flex-start 交叉轴的起点对齐。
flex-end 交叉轴的终点对齐。
center 交叉轴的中点对齐。
baseline 项目的第一行文字的基线对齐。
stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
display: flex;
/* 交叉轴的对齐方式 */
/* align-items: stretch; 默认 当项目未设置高度或高度为auto时, 将占满整个父容器 */
/* align-items: flex-start; 与交叉轴的起点对齐 居上对齐 */
/* align-items: flex-end; 与交叉轴的终点对齐 居下对齐 */
/*align-items: center; 垂直居中对齐 */
align-items: baseline; /* 与第一个项目的文字基线对齐 */
/* justify-content: center; */
width: 500px;
height: 500px;
background-color: #ccc;
}
.box .item{
width: 100px;
height: 100px;
}
.box .item:nth-of-type(1){
background-color: #f00;
font-size: 30px;
}
.box .item:nth-of-type(2){
background-color: #0f0;
}
.box .item:nth-of-type(3){
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
</body>
</html>
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一 条轴线排不下，如何换行。
flex-wrap 项目换行方式
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
display: flex;
/* 当容器空间不足时,项目会等比例缩小 */
/* 空间有剩余,项目不会放大 */
/* 项目换行 */
/* flex-wrap: nowrap; 默认 项目不换行 */
flex-wrap: wrap; /* 项目换行 第一行在上侧 */
/*flex-wrap: wrap-reverse; 项目换行 第一行在下侧 */
/* justify-content: center; 主轴 */
/* align-items: center; */
/*align-content: flex-start; 项目整体与交叉轴的起点对齐 */
/* align-content: flex-end; 项目整体与交叉轴的终点对齐 */
/*align-content: center; 项目整体与交叉轴的中点对齐 */
/* align-content: space-between; 每两行之间的距离相等 */
/*align-content: space-around; 每1行两侧的距离相等 */
align-content: space-evenly;
width: 500px;
height: 500px;
background-color: #ccc;
}
.box .item{
width: 200px;
height: 200px;
}
.box .item:nth-of-type(1){
background-color: #f00;
}
.box .item:nth-of-type(2){
background-color: #0f0;
}
.box .item:nth-of-type(3){
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
</body>
</html>
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
