flex——快速布局大杀器，帮助前端人员摆脱float，clearfix，position：relative/absolute等的传统布局的繁琐。
本文将分为两部分介绍flex，第一部分为基本概念介绍,第二部分为flex属性介绍，第三部分为flex布局实例。
二、属性介绍：
-
justify-content ：调整主轴方向上的对齐方式（主轴默认水平方向，即默认调整水平方向的对齐）。
不设置时，默认属性为：flex-start。
具体每个属性呈现的样式如图所示：
代码如下：
<style type="text/css">
.container{
width: 800px;
height: 100px;
background-color: black;
display: flex;
}
.item{
width: 30%;
height: 100px;
background-color: pink;
}
.start{
justify-content:flex-start;
}
.end{
justify-content: flex-end;
}
.center{
justify-content: center;
}
.around{
justify-content: space-around;
}
.between{
justify-content: space-between;
}
</style>
<body>
<h1>justify-content调整主轴方向上的对齐方式（主轴默认水平方向，即默认调整水平方向的对齐）</h1>
<h1>默认：justify-content:flex-start</h1>
<div class="container start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h1>justify-content:flex-end</h1>
<div class="container end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h1>justify-content:center</h1>
<div class="container center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h1>justify-content:space-around</h1>
<div class="container around">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h1>justify-content:space-between</h1>
<div class="container between">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
2.align-items：调整侧轴方向上的对齐方式（侧轴默认垂直方向，即默认调整垂直方向的对齐）
不设置时，默认属性为：flex-start。
具体每个属性呈现的样式如图所示：
网友评论