示例
div左右布局
display: flex;
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>图文左右</title>
<style>#content {
display: flex;
width: 400px;
border: 2px solid #900;
padding: 10px;
overflow: hidden
}
.content-image {
width: 100px;
height: 100px;
border: 1px solid #060
}
.content-words {
width: 280px;
border: 1px solid #00F
}</style>
</head>
<body>
<div id="content">
<div class="content-image">图片</div>
<div class="content-words">
从类别上看,目前以运动健身KOL为核心的营销模式呈现三类特点:大规模流量获取、多元营销变现(代表KOL如:刘畊宏,截止5月跨平台去重粉丝7,907万);专业化运营、品牌平台官方合作(代表KOL如:帕梅拉,截止5月跨平台去重粉丝1,339万);聚焦细分受众、平台营销带货(代表KOL如:徒手健身林志斌、猫宁逆袭记、慧姐爱健身正能量,截止5月跨平台去重活跃用户数分别为1,970万、1,960万、1,381万)
</div>
</div>
</body>
</html>
图文围绕布局
float:left;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>图文环绕</title>
<style>
#content {
width: 400px;
border: 2px solid #900;
padding: 10px;
overflow: hidden
}
.content-image {
float: left;
width: 100px;
height: 100px;
border: 1px solid #060
}
.content-words {
float: around;
width: 280px;
border: 1px solid #00F
}
</style>
</head>
<body>
<div id="content">
<div class="content-image">图片</div>
<div class="content-words">
从类别上看,目前以运动健身KOL为核心的营销模式呈现三类特点:大规模流量获取、多元营销变现(代表KOL如:刘畊宏,截止5月跨平台去重粉丝7,907万);专业化运营、品牌平台官方合作(代表KOL如:帕梅拉,截止5月跨平台去重粉丝1,339万);聚焦细分受众、平台营销带货(代表KOL如:徒手健身林志斌、猫宁逆袭记、慧姐爱健身正能量,截止5月跨平台去重活跃用户数分别为1,970万、1,960万、1,381万)
</div>
</div>
</body>
</html>
简介
Flex 或 Flexible Box 或 flexbox 意为弹性布局
容器默认两根轴:水平主轴main-axis和垂直交叉轴cross axis。元素默认沿主轴排列。
容器属性
Justify-content
控制元素主轴对齐
justify-content: flex-start | flex-end | center | space-between | space-around
flex-start 左边对齐
flex-end 右边对齐
center 中间对齐
space-between 等间距两边对齐
space-around 左右两边的间距为元素间间距的二分之一
space-evenly 元素间以及与两边等间距隔开
align-items
控制元素纵轴对齐
align-items: flex-start | flex-end | center | baseline | stretch
flex-start 起点对齐
flex-end 底部对齐
center 居中排列
baseline 项目的第一行文字的基线对齐;
stretch (默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
flex-wrap
描述子元素换行方式
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
- nowrap - 默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
- wrap-reverse -反转 wrap 排列。
Align-self
设置元素自身在轴方向上的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch
注意
flex子元素的float、clear、vertical-align属性将失效。