前端开发中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>
#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>
#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前端开发怎么样 |
前端开发怎么自学 |
评论前必须登录!
注册