浅谈flex布局
学习小建议:flex布局在实战之前,需要了解相关属性,在进行实战的训练,你会感觉到倍爽。
传统的布局基于盒子模型,依赖display属性和position属性和float属性,它在实现一些布局的时候非常的不方便,如垂直居中。
1.flex布局是弹性布局的意思,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为flex布局
.box{
display:flex;
}
行内元素也可使用:
.box{
display:inline-flex;
}
2.采用flex布局,称flex为容器,它的所有子元素自动成为容器成员。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size
3.容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1flex-direction属性决定主轴的方向,即项目的排列放方向。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
3.2flex-wrap属性,flex容器中的元素是否按照轴线排列。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap(默认):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
3.3 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
3.4 justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
3.5 align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
3.6 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
项目实战: 一个子元素##
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
.box{
100px;
height: 100px;
background: gainsboro;
margin: 50px auto;
border-radius: 20px;
}
.item{
20px;
height: 20px;
background: black;
border-radius: 10px;
margin: 5px 5px;
}
.box{
display: flex; /*左上角默认首行左对齐*/
}
.box{
display: flex;
justify-content: center; /*设置元素的对齐方式*/
}
.box{
display: flex;
justify-content: flex-end;
}
.box{
display: flex;
align-items: center; /*设置主轴对齐方式*/
}
.box{
display: flex;
justify-content: center;
align-items: center;
}
.box{
display: flex;
justify-content: center;
align-items: flex-end;
}
.box{
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
</div>
</body>
</html>
项目实战:两个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
.box{
100px;
height: 100px;
background: gainsboro;
margin: 50px auto;
border-radius: 20px;
}
.item{
20px;
height: 20px;
background: black;
border-radius: 10px;
margin: 10px 10px;
}
.box{
display: flex;
justify-content: space-between;
}
.box{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.box{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.box{
display: flex;
}
.item:nth-child(2){
align-self: center;
}
.box{
display: flex;
justify-content: space-between;
}
.item:nth-child(2){
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<span class="item"></span>
</div>
</body>
</html>
项目实战:三个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
.box{
100px;
height: 100px;
background: gainsboro;
margin: 50px auto;
border-radius: 20px;
}
.item{
10px;
height: 10px;
background: black;
border-radius: 10px;
margin: 10px 10px;
}
.box{
display: flex;
}
.item:nth-child(2){
align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</body>
</html>
项目实战:四个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
.box{
100px;
height: 100px;
background: gainsboro;
margin: 50px auto;
border-radius: 20px;
}
.item{
20px;
height: 20px;
background: black;
border-radius: 10px;
margin: 5px 5px;
}
.box{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-content: space-between;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
.box{
100px;
height: 100px;
background: gainsboro;
margin: 50px auto;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.item{
20px;
height: 20px;
background: black;
border-radius: 10px;
margin: 5px 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</body>
</html>
项目是实战:六个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
.box{
100px;
height: 100px;
background: gainsboro;
margin: 50px auto;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
}
.row{
flex-basis: 100%;
display:flex;
}
.row:nth-child(2){
justify-content: center;
}
.row:nth-child(3){
justify-content: space-between;
}
.item{
20px;
height: 20px;
background: black;
border-radius: 10px;
margin: 5px 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="row">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</body>
</html>
实战布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流式布局</title>
<style type="text/css">
.parent{
200px;
height: 150px;
background: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child{
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid rebeccapurple;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
最后来一道大菜:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
.first-face {
display: flex;
justify-content: center;
align-items: center;
}
.second-face {
display: flex;
justify-content: space-between;
}
.second-face .pip:nth-of-type(2) {
align-self: flex-end;
}
.third-face {
display: flex;
justify-content: space-between;
}
.third-face .pip:nth-of-type(2) {
align-self: center;
}
.third-face .pip:nth-of-type(3) {
align-self: flex-end;
}
.fourth-face, .sixth-face {
display: flex;
justify-content: space-between;
}
.fourth-face .column, .sixth-face .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.fifth-face {
display: flex;
justify-content: space-between;
}
.fifth-face .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.fifth-face .column:nth-of-type(2) {
justify-content: center;
}
/* OTHER STYLES */
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
vertical-align: center;
flex-wrap: wrap;
align-content: center;
font-family: 'Open Sans', sans-serif;
background: linear-gradient(top, #222, #333);
}
[class$="face"] {
margin: 16px;
padding: 4px;
background-color: #e7e7e7;
104px;
height: 104px;
object-fit: contain;
box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7;
border-radius: 10%;
}
.pip {
display: block;
24px;
height: 24px;
border-radius: 50%;
margin: 4px;
background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
</style>
</head>
<body>
<div class="first-face">
<span class="pip"></span>
</div>
<div class="second-face">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="third-face">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="fourth-face">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
<div class="fifth-face">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
<div class="sixth-face">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
</body>
</html>
粘贴到你的编辑器里面即可看到效果。