| 前端开发中rem怎么转换 |
| 前端开发怎么做个人博客 |
| 怎么搭建前端开发环境 |
flex布局是一种可伸缩的布局，相对于float布局方式，更加灵活简便。
html 代码
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
#wraper {
height: 600px;
display: flex;
background-color: #ccc;
justify-content: space-between;
padding: 20px;
align-items: center;
flex-wrap: wrap;
}
#box1 {
width: 150px;
height: 120px;
background-color: red;
}
#box2 {
width: 150px;
height: 100px;
background-color: yellow;
}
#box3 {
width: 150px;
height: 40px;
background-color: blue;
}
#box4 {
width: 150px;
height: 200px;
background-color: green;
}
@media screen and (max-width: 640px) {
#box4 {
order: -1;
}
}
</style>
</head>
<body>
<div id=”wraper”>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>
<div id=”box4″></div>
</div>
</body>
上面就是一个flex布局的演示，它具有良好的响应性能。
当需要在水平方向伸缩时，水平向是主轴，垂直向是侧轴。若在垂直方向伸缩，则相反。
伸缩容器即是外部的盒子，伸缩项目是盒子内部包含的需要变换排列的小盒子。
display：flex；这是构建伸缩容器的属性，只有将display设置为flex，才可进行接下来的flex布局。dispaly也可设为inline-flex，同样可伸缩，只是这会让它成为内联元素，与inline-block相似。
flex-direction属性，用来定义主轴侧轴方向。有row，column，column-reverse，row-reverse四个值,默认值是row，表示在水平方向上展开可伸缩项，column代表在垂直方向上展开可伸缩项目。
column-reverse，row-reverse代表相反方向。下图即为设置为column的效果：
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
#wraper {
height: 600px;
display: flex;
background-color: #ccc;
padding: 20px;
flex-direction: column;
}
#box1 {
width: 150px;
height: 120px;
background-color: red;
}
#box2 {
width: 150px;
height: 100px;
background-color: yellow;
}
#box3 {
width: 150px;
height: 40px;
background-color: blue;
}
#box4 {
width: 150px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id=”wraper”>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>
<div id=”box4″></div>
</div>
</body>
</html>
justify-content属性，用来表示可伸缩项目在主轴方向上的对齐方式。有flex-start,flex-end,center,space-between,space-around五个值，flex-start表示相对于主轴起点,flex-end表示相对于主轴终点对齐，center表示居中对齐 ,space-between表示两端对齐并将剩余空间在主轴方向上进行平均分配，space-around表示居中对齐然后在主轴方向上将剩余空间平均分配。下图为设置成space-between的效果：
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style type=”text/css”>
#wraper {
height: 600px;
display: flex;
background-color: #ccc;
flex-direction: row;
justify-content: space-between;
}
#box1 {
width: 150px;
height: 120px;
background-color: red;
}
#box2 {
width: 150px;
height: 100px;
background-color: yellow;
}
#box3 {
width: 150px;
height: 40px;
background-color: blue;
}
#box4 {
width: 150px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id=”wraper”>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>
<div id=”box4″></div>
</div>
</body>
</html>
align-items属性，用来表示可伸缩项目在侧轴方向上的对齐方式，有flex-start,flex-end,center,baseline,stretch五个值。baseline值是按照一个计算出来的基准线将项目沿基准线对齐，基准线的计算取决于可伸缩项目的尺寸及内容。stretch值是会让可伸缩项目在侧轴方向上进行拉伸，前提是项目在侧轴方向上没有设置尺寸，否则会按照你设置的尺寸来渲染。下图为设置成stretch的效果:
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style type=”text/css”>
#wraper {
height: 600px;
display: flex;
background-color: #ccc;
padding: 20px;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
#box1 {
width: 150px;
background-color: red;
}
#box2 {
width: 150px;
background-color: yellow;
}
#box3 {
width: 150px;
background-color: blue;
}
#box4 {
width: 150px;
background-color: green;
}
</style>
</head>
<body>
<div id=”wraper”>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>
<div id=”box4″></div>
</div>
</body>
</html>
flex-wrap属性，表示是否支持换行或者换列，它有nowrap,wrap,wrap-reverse三个值，nowrap是默认值，表示不换行或者换列，wrap表示换行或者换列，wrap-reverse表示支持换行或者换列，但是会沿着相反方向进行排列。
下面为换行效果:
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style type=”text/css”>
#wraper {
height: 600px;
display: flex;
background-color: #ccc;
padding: 20px;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
#box1 {
width: 150px;
height: 120px;
background-color: red;
}
#box2 {
width: 150px;
height: 100px;
background-color: yellow;
}
#box3 {
width: 150px;
height: 40px;
background-color: blue;
}
#box4 {
width: 150px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id=”wraper”>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>
<div id=”box4″></div>
</div>
</body>
</html>
align-content属性，用来表示换行之后各个伸缩行的对齐方式，它有 stretch,flex-start,flex-end,center,space-between,space-around六个值，意义和align-items属性取值意义相同。
flex-flow属性，这是一个复属性，如同border一样，它是flex-direction和flex-wrap的复合属性，flex-direction：row;flex-wrap:wrap就等同于flex-flow:row wrap。
order属性，这个属性是用来指定排列顺序，默认情况下，每个伸缩项的order都是0，改属性可为正可为负，越大的值会被排列在越后面。下面为box4设置后效果
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style type=”text/css”>
#wraper {
height: 600px;
display: flex;
background-color: #ccc;
padding: 20px;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
#box1 {
width: 150px;
height: 120px;
background-color: red;
}
#box2 {
width: 150px;
height: 100px;
background-color: yellow;
}
#box3 {
width: 150px;
height: 40px;
background-color: blue;
}
#box4 {
width: 150px;
height: 200px;
background-color: green;
order: -1;
}
</style>
</head>
<body>
<div id=”wraper”>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>
<div id=”box4″></div>
</div>
</body>
</html>
align-self属性，这个属性是设置各个可伸缩项在侧轴上的对齐方式的，同align-item一样，只是align-self属性是设置在可伸缩项上的，它会覆盖之前的align-item属性，让每个可伸缩项在侧轴上具有不同的对齐方式，取值和align-item相同。
flex属性，这个属性是加在伸缩项上面的，它定义了伸缩项如何分配主轴尺寸，设置为auto或者数字，auto浏览器会自动均分，数字会按照伸缩项所占的数字比重来分配空间。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style type=”text/css”>
#wraper {
height: 600px;
display: flex;
background-color: #ccc;
padding: 20px;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
#box1 {
height: 120px;
background-color: red;
flex: 1;
}
#box2 {
height: 100px;
background-color: yellow;
flex: 2;
}
#box3 {
height: 40px;
background-color: blue;
flex: 1;
}
#box4 {
height: 200px;
background-color: green;
flex: 2;
}
</style>
</head>
<body>
<div id=”wraper”>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>
<div id=”box4″></div>
</div>
</body>
</html>
尤其提到的一点，margin在flex布局中能力很大，如果给某一个可伸缩项设置某个方向上的margin为auto，那么这个可伸缩项就会占据这个方向上所有的剩余空间为自己的margin。如下面我们把box1的margin-right设置为auto;
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style type=”text/css”>
#wraper {
height: 600px;
display: flex;
background-color: #ccc;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
#box1 {
width: 150px;
margin-right: auto;
height: 120px;
background-color: red;
}
#box2 {
width: 150px;
height: 100px;
background-color: yellow;
}
#box3 {
width: 150px;
height: 40px;
background-color: blue;
}
#box4 {
width: 150px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id=”wraper”>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>
<div id=”box4″></div>
</div>
</body>
</html>
| 浪潮前端开发怎么样 |
| 51前端开发怎么样 |
| 前端开发怎么自学 |
近期评论