CSS3-flex弹性布局

品茶散步

已于 2022-06-29 11:09:48 修改

阅读量161

点赞数

文章标签：前端 css

于 2022-06-28 15:10:51 首次发布

本文链接：https://blog.csdn.net/necessary8/article/details/125502031

版权

示例

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

设置元素自身在轴方向上的对齐方式

注意

flex子元素的float、clear、vertical-align属性将失效。

品茶散步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3-flex弹性布局

css float、flex布局；div图文布局
复制链接

扫一扫