816 字
3 分钟阅读
html – flex布局
简介
flex是flexible Box的缩写，意为”弹性布局”，是一种一维的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力。
通过给父容器添加flex的相关属性,来控制子元素的位置和排列方式。
代码演示
<html>
<head>
<title>html flex布局</title>
<style>
body {
margin: 0;
}
#contains {
background-color: gray;
width: 500px;
height: 400px;
/* 开启flex布局 */
display: flex;
/* 布局方向 */
/* column 垂直布局 */
/* row 水平布局 默认 */
flex-direction: row;
/* 排列方式 */
/* flex-start 从左开始 */
/* flex-end 从右开始 */
/* center 居中 */
/* space-around 两边留空隙 or 平分剩余空间 */
/* space-between 两边不留空隙 or 两边贴边 剩下的平分剩余空间 */
justify-content: space-between;
}
#item {
background-color: greenyellow;
height: 100px;
width: 100px;
margin: 5px
}
</style>
</head>
<body>
<div id = "contains">
<div id = "item">1</div>
<div id = "item">2</div>
<div id = "item">3</div>
</div>
</body>
</html>效果
CSS 样式
- display: flex 开启flex布局
- flex-direction: 布局方向
- row 水平布局 默认
- column 垂直布局
- justify-content: 排列方式
- flex-start 从左开始
- flex-end 从右开始
- center 居中
- space-around 平分剩余空间/两边不贴边
- space-between 两边贴边 剩下的平分剩余空间
