您的位置：首页 > 其它

弹性布局(Flexbox)的简单使用

2018-03-05 15:38 661 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.box{width:50px;height:50px;background-color:green;
text-align: center;line-height:50px;color:#FFF;margin:5px;}
.box2{background-color: blue;height:40px;line-height:40px;}
.box3{background-color:chocolate;height:40px;line-height:40px;}
.box4{
background-color:darkcyan;width:100px;

/*
align-self 属性允许你对特定的项目有与其他项目不一样的对齐方式，
它可覆盖 align-items 属性。
虽然它的默认值为 auto，但它继承了父元素 align-items 的属性。
除了 auto 外，其他都与 align-items 属性完全一致。
*/
align-self:flex-start;
}
.container{
/* 指定使用flex布局 */
display:flex;

/*
flex-direction 指定项目方向，默认是由主轴（从左到右）排列
常用属性：row column
row 水平方向对齐
column 垂直方向对齐
*/
flex-direction: column;

/*
justify-content 定义了项目在主轴(从左到右)的对齐方式
属性:Flex-start Flex-end Center Space-between Space-around
Space-between 实现了两端对齐
Space-around 使项目两侧的间隔相等
*/
justify-content:center;

/*
align-items 属性则定义了项目在交叉轴（从上到下）上的对其方式
属性：flex-start flex-end center stretch baseline
stretch 如果项目未设置高度或设为 auto，项目将占满整个容器
baseline 项目将与段落标签的底部对齐
*/
align-items:center;
}
</style>
</head>
<body>
<div class="container">
<div class="box1 box">1</div>
<div class="box2 box">2</div>
<div class="box3 box">3</div>
<div class="box4 box">4</div>
</div>
</body>
</html>

结果：

详见：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航