Flex布局：实现div一个往左一个往右效果

最新推荐文章于 2024-06-12 09:52:12 发布

沫上稻草

最新推荐文章于 2024-06-12 09:52:12 发布

阅读量2.1w

点赞数 12

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43917285/article/details/104435916

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Flex布局：具体内容可以参考阮一峰老师的日志
链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

先放实现后的效果图：
在里插入图片描述
效果描述：左右div分别靠左靠右展示，其内容垂直居中显示

实现思路：使用 flex 布局中的 justify-content 属性改变两个div在主轴上的对齐方式，在两个div内部可以继续设置flex布局使内容垂直居中显示

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style>
        *{
            margin: 0;   
            padding: 0;
        }
        .all{
            display: flex;
            height: 70px;
        }
        .left{
            width: 100px;
            height: 50px;
            background-color: darksalmon; 
            justify-content: flex-start; 
            display: flex;
            align-items: center;
        }
        .right{
            flex:1;           
            background-color: coral;
            height: 50px;
            justify-content: flex-end;
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="left">
        <div class="img1">图片</div>
        <span class="text">one</span>
    </div>
    <div class="right">
        <div class="">图片</div>
        <span>two</span>
    </div>
</div>

</body>
</html>

首次写总结博客，有什么问题的请提出来哦在这里插入图片描述

沫上稻草

关注

12
点赞
踩
22

收藏

觉得还不错? 一键收藏
3
评论
Flex布局：实现div一个往左一个往右效果

Flex布局：具体内容可以参考阮一峰老师的日志链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html先放实现后的效果图：效果描述：左右div分别靠左靠右展示，其内容垂直居中显示实现思路：使用 flex 布局中的 justify-content 属性改变两个div在主轴上的对齐方式，在两个div内部可以继续设置flex布局使内容...
复制链接

扫一扫