弹性布局
(1)优点:
1.适应性强,在做不同屏幕分辨率的界面时非常实用.
2.可以随意按照宽度,比例划分宽高.
3.可以随意改变元素的显示顺序.
4.自适应布局实现快捷,易维护.
(2)弹性盒子:
是将父级变成弹性空间
如果想使用弹性布局,就必须先将父级变成弹性空间,这样,才能将子级变成弹性盒子.
display;flex
兼容写法:
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
如果一个盒子变成弹性容器,那么他将具备两个轴-----主轴,交叉轴.
(3)生效在父容器(弹性盒子)的属性:
一、 确定主轴方向
在弹性容器中元素按照主轴排列
flex-direction:
row 默认值 行
row-reverse 反向行
column 列
column 反向列
二、主轴方向是否换行
flex-wrap:
no-wrap 不换行
wrap 换行
wrap-reverse 反向换行
三、主轴方向的对齐方式
justify-content:
1.flex-start :flex 项从主轴的开始位置（main-start）开始排布。 (默认值)
下面展示一些 `内联代码片`。
.box{
width: 200px;
height: 200px;
display: flex;
justify-content: flex-start;
background-color: red;
}
.box .son1{
width: 50px;
height: 50px;
background-color: blue;
}
.box .son2{
width: 50px;
height: 50px;
background-color: green;
}
效果:
2.flex-end :flex 项从主轴的结束位置（main-end）开始排布.
下面展示一些 `内联代码片`。
.box{
width: 200px;
height: 200px;
display: flex;
justify-content: flex-end;
background-color: red;
}
.box .son1{
width: 50px;
height: 50px;
background-color: blue;
}
.box .son2{
width: 50px;
height: 50px;
background-color: green;
}
效果:
3.center: flex 项沿主轴居中排布.
下面展示一些 `内联代码片`。
.box{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
background-color: red;
}
.box .son1{
width: 50px;
height: 50px;
background-color: blue;
}
.box .son2{
width: 50px;
height: 50px;
background-color: green;
}
效果:
4. space-between: flex 项沿主轴均匀排布，即我们常说的沿主轴 两端对齐 ，第一个flex 项在主轴开始位置，最后一个flex 项在主轴结束位置。
下面展示一些 `内联代码片`。
.box{
width: 200px;
height: 200px;
display: flex;
justify-content: space-between;
background-color: red;
}
.box .son1{
width: 50px;
height: 50px;
background-color: blue;
}
.box .son2{
width: 50px;
height: 50px;
background-color: green;
}
效果:
5. space-around: flex 项沿主轴均匀排布。要注意的是 flex 项看起来间隙是不均匀的，因为所有 flex 项两边的空间是相等的。第一项在容器边缘有一个单位的空间，但是在两个 flex 项之间有两个单位的间隙，因为每个 flex 项的两侧都有一个单位的间隙。
下面展示一些 `内联代码片`。
.box{
width: 200px;
height: 200px;
display: flex;
justify-content:space-around;
background-color: red;
}
.box .son1{
width: 50px;
height: 50px;
background-color: blue;
}
.box .son2{
width: 50px;
height: 50px;
background-color: green;
}
效果:
6.space-evenly: 任何两个 flex 项之间的间距（以及到 flex 容器边缘的空间）相等。（注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content: space-evenly 也是这个逻辑 ）
.box{
width: 200px;
height: 200px;
display: flex;
justify-content:space-evenly;
background-color: red;
}
.box .son1{
width: 50px;
height: 50px;
background-color: blue;
}
.box .son2{
width: 50px;
height: 50px;
background-color: green;
}
效果:
四、交叉轴方向的对齐方式
align-items:
flex-start: flex 项按照交叉轴的开始位置（cross-start）对齐。
flex-end: flex 项按照交叉轴的结束位置（cross-end）对齐。
center: flex 项以交叉轴为中心，居中对齐。
baseline: flex 项按照他们的文字基线对齐。
stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性。
五、如何分配交叉轴的剩余空间
此属性只有在交叉轴有多条内容时才生效
align-content:
flex-start：多行在容器的交叉轴开始位置排布
flex-end：多行在容器的结束位置排布
center：多行在容器的中间位置排布
space-between：多行均匀分布；第一行分布在容器的开始位置，最后一行分布在容器的结束位置
space-around: 多行均匀分布，并且每行的间距（包括离容器边缘的间距）相同；
stretch（默认值）：占满整个交叉轴。前提不设置大小属性设置大小属性设置大小属性设置大小属性设置大小属性设置大小属性
(3)生效在子元素上的属性:
1> order 排序，值越小，排名越靠前，默认值是0
2> flex-grow: 定义子元素的放大比例; 默认值是0，不放大！
3> flex-shrink: 1; 定义元素在主轴占不下时的缩小比例，默认值是1，表示等比缩小！
4> flex: flex-grow flex-shrink flex-basis;
默认: 0 1 auto;
经常会用到的两个书写方式：
flex: auto | none;
auto: 1 1 auto; 开启子选项的放大行为
none: 0 0 auto; 关闭子选项的缩小行为
5> align-self: 他的值跟align-items的值一模一样，只是，此属性是设置某一个元素的交叉轴对齐方式.
以下是一些例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 0px 50px;
}
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
/* -----------1-------- */
.first {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.first .one {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
}
.first .one .point-one {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ----------2--------- */
.second {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.second .two {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
justify-content: center;
}
.second .two .point-two {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ---------3---------- */
.third {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.third .three {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
justify-content: flex-end;
}
.third .three .point-three {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ----------4--------- */
.fourth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.fourth .four {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
align-items: center;
}
.fourth .four .point-four {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ---------5---------- */
.fifth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.fifth .five {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
justify-content: center;
align-items: center;
}
.fifth .five .point-five {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ---------6---------- */
.sixth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.sixth .six {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
flex-direction: column;
justify-content: space-between;
}
.sixth .six .point-six {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ---------7---------- */
.seventh {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.seventh .seven {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.seventh .seven .point-seven {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ---------8---------- */
.eighth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.eighth .eight {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
}
.eighth .eight .point-eight {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ---------9---------- */
.ninth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.ninth .nine {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
justify-content: space-between;
}
.ninth .nine .point-nine {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ---------10---------- */
.tenth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.tenth .ten {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
}
.tenth .ten .point-ten:nth-child(1) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.tenth .ten .point-ten:nth-child(2) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
align-self: center;
}
/* ---------11---------- */
.eleventh {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.eleventh .eleven {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
justify-content: space-between;
}
.eleventh .eleven .point-eleven:nth-child(1) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.eleventh .eleven .point-eleven:nth-child(2) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
align-self: flex-end;
}
/* ---------12---------- */
.twelfth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.twelfth .twelve {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
}
.twelfth .twelve .point-twelve:nth-child(1) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.twelfth .twelve .point-twelve:nth-child(2) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
align-self: center;
}
.twelfth .twelve .point-twelve:nth-child(3) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
align-self: self-end;
}
/* ---------13---------- */
.thirteenth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.thirteenth .thirteen {
width: 122px;
height: 122px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.thirteenth .thirteen .point-thirteen:nth-child(1) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.thirteenth .thirteen .point-thirteen:nth-child(2) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.thirteenth .thirteen .point-thirteen:nth-child(3) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.thirteenth .thirteen .point-thirteen:nth-child(4) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
align-self: flex-end;
}
/* ---------14---------- */
.fourteenth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.fourteenth .fourteen {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
flex-wrap: wrap;
align-content: space-between;
}
.fourteenth .fourteen .point-fourteen:nth-child(1) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.fourteenth .fourteen .point-fourteen:nth-child(2) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
margin-left: 28px;
}
.fourteenth .fourteen .point-fourteen:nth-child(3) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.fourteenth .fourteen .point-fourteen:nth-child(4) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
margin-left: 28px;
}
/* ---------15---------- */
.fifteenth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.fifteenth .fifteen {
width: 122px;
height: 122px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
flex-wrap: wrap;
align-content: space-between;
}
.fifteenth .fifteen .point-fifteen:nth-child(1) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.fifteenth .fifteen .point-fifteen:nth-child(2) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.fifteenth .fifteen .point-fifteen:nth-child(3) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.fifteenth .fifteen .point-fifteen:nth-child(4) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.fifteenth .fifteen .point-fifteen:nth-child(5) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.fifteenth .fifteen .point-fifteen:nth-child(6) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ---------16---------- */
.sixteenth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.sixteenth .sixteen {
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
flex-wrap: wrap;
}
.sixteenth .sixteen .point-sixteen:nth-child(1) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.sixteenth .sixteen .point-sixteen:nth-child(2) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
margin-left: 28px;
}
.sixteenth .sixteen .point-sixteen:nth-child(3) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.sixteenth .sixteen .point-sixteen:nth-child(4) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
margin-left: 28px;
}
.sixteenth .sixteen .point-sixteen:nth-child(5) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.sixteenth .sixteen .point-sixteen:nth-child(6) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
margin-left: 28px;
}
/* ---------17---------- */
.seventeenth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.seventeenth .seventeen {
width: 122px;
height: 130px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
flex-wrap: wrap;
align-content: space-between;
}
.seventeenth .seventeen .point-seventeen:nth-child(1) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.seventeenth .seventeen .point-seventeen:nth-child(2) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.seventeenth .seventeen .point-seventeen:nth-child(3) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.seventeenth .seventeen .point-seventeen:nth-child(4) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
.seventeenth .seventeen .point-seventeen:nth-child(5) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
margin-top: -35px;
}
.seventeenth .seventeen .point-seventeen:nth-child(6) {
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
/* ---------18---------- */
.eighteenth {
width: 400px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.eighteenth .eighteen {
width: 122px;
height: 130px;
background-color: #fff;
border-radius: 15px;
display: flex;
padding: 10px;
border: 6px solid #f1e9e9;
flex-wrap: wrap;
align-content: space-between;
}
.eighteenth .eighteen .point-eighteen{
width: 30px;
height: 30px;
background-color: #000000;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="first">
<div class="one">
<div class="point-one"></div>
</div>
</div>
<div class="second">
<div class="two">
<div class="point-two"></div>
</div>
</div>
<div class="third">
<div class="three">
<div class="point-three"></div>
</div>
</div>
<div class="fourth">
<div class="four">
<div class="point-four"></div>
</div>
</div>
<div class="fifth">
<div class="five">
<div class="point-five"></div>
</div>
</div>
<div class="sixth">
<div class="six">
<div class="point-six"></div>
<div class="point-six"></div>
</div>
</div>
<div class="seventh">
<div class="seven">
<div class="point-seven"></div>
<div class="point-seven"></div>
</div>
</div>
<div class="eighth">
<div class="eight">
<div class="point-eight"></div>
<div class="point-eight"></div>
</div>
</div>
<div class="ninth">
<div class="nine">
<div class="point-nine"></div>
<div class="point-nine"></div>
</div>
</div>
<div class="tenth">
<div class="ten">
<div class="point-ten"></div>
<div class="point-ten"></div>
</div>
</div>
<div class="eleventh">
<div class="eleven">
<div class="point-eleven"></div>
<div class="point-eleven"></div>
</div>
</div>
<div class="twelfth">
<div class="twelve">
<div class="point-twelve"></div>
<div class="point-twelve"></div>
<div class="point-twelve"></div>
</div>
</div>
<div class="thirteenth">
<div class="thirteen">
<div class="point-thirteen"></div>
<div class="point-thirteen"></div>
<div class="point-thirteen"></div>
<div class="point-thirteen"></div>
</div>
</div>
<div class="fourteenth">
<div class="fourteen">
<div class="point-fourteen"></div>
<div class="point-fourteen"></div>
<div class="point-fourteen"></div>
<div class="point-fourteen"></div>
</div>
</div>
<div class="fifteenth">
<div class="fifteen">
<div class="point-fifteen"></div>
<div class="point-fifteen"></div>
<div class="point-fifteen"></div>
<div class="point-fifteen"></div>
<div class="point-fifteen"></div>
<div class="point-fifteen"></div>
</div>
</div>
<div class="sixteenth">
<div class="sixteen">
<div class="point-sixteen"></div>
<div class="point-sixteen"></div>
<div class="point-sixteen"></div>
<div class="point-sixteen"></div>
<div class="point-sixteen"></div>
<div class="point-sixteen"></div>
</div>
</div>
<div class="seventeenth">
<div class="seventeen">
<div class="point-seventeen"></div>
<div class="point-seventeen"></div>
<div class="point-seventeen"></div>
<div class="point-seventeen"></div>
<div class="point-seventeen"></div>
<div class="point-seventeen"></div>
</div>
</div>
<div class="eighteenth">
<div class="eighteen">
<div class="point-eighteen"></div>
<div class="point-eighteen"></div>
<div class="point-eighteen"></div>
<div class="point-eighteen"></div>
<div class="point-eighteen"></div>
<div class="point-eighteen"></div>
<div class="point-eighteen"></div>
<div class="point-eighteen"></div>
<div class="point-eighteen"></div>
</div>
</div>
</body>
</html>
效果:
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
