Flex弹性容器基础页面布局

最新推荐文章于 2024-05-12 03:14:35 发布
最新推荐文章于 2024-05-12 03:14:35 发布
阅读量62 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pckzzy114/article/details/132536233
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .navs{
            width: 100%;
            display: flex;
            justify-content: space-between;
            line-height: 40px;
            height: 40px;
            background-color: lightblue;
            font-size: 20px;
        }
        .navs ol{
            display: flex;
            list-style: none;
        }
        .navs ol li{
            width: 60px;
            text-align: center;
        }
        .navs ol li a{
            text-decoration: none;
            color: white;
        }
        .navs ol li a:hover, .navs ol li.active a{
            color: lightcoral;
        }

        .body{
            width: 1100px;
            background-color: lightgray;
            display: flex;
        }

        .body .main{
            width: 70%;
            padding: 10px 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .body .aside{
            width: 30%;
        }

        .body .main .item{
            display: flex;
            align-items: center;
            padding: 10px 20px;
            border: 1px solid lightcoral;
            margin-bottom: 10px;
            border-radius: 15px;
            width: 40%;
        }

        .body .main .item .left{
            width: 40%;
            margin-right: 20px;
        }
        .body .main .item .left img{
            width: 100%;
            border-radius: 50%;
        }

        .body .main .item .right .head{
            font-size: 20px;
            text-align: center;
            font-weight: 700;
        }

        .body .main .item .right .content{
            text-indent: 2em;
        }



        .body .aside ol{
            list-style: none;
        }

        .body .aside ol li{
            height: 40px;
            line-height: 40px;
            margin: 5px 0;
            font-size: 30px;
        }

        .body .aside ol li a{
            text-align: center;
            color: white;
            text-decoration: none;
        }

        .body .aside ol li a:hover{
            color: lightcoral;
        }

    </style>
</head>
<body>
    <div class="navs">
        <ol>
            <li class="active"><a href="">首页</a></li>
            <li><a href="">我的</a></li>
            <li><a href="">文档</a></li>
        </ol>
        <ol>
            <li><a href="">登录</a></li>
            <li><a href="">注册</a></li>
        </ol>
    </div>

    <div class="body">
        <div class="main">
            
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原我的工作内容是编写页面，把设计人员设计好的布局，使用html，css 100%还原</div>
                </div>
            </div>
            
        </div>
        <div class="aside">
            <ol>
                <li><a href="">点我发现更多1</a></li>
                <li><a href="">点我发现更多2</a></li>
                <li><a href="">点我发现更多3</a></li>
                <li><a href="">点我发现更多4</a></li>
                <li><a href="">点我发现更多5</a></li>
                <li><a href="">点我发现更多6</a></li>
                <li><a href="">点我发现更多7</a></li>
                <li><a href="">点我发现更多8</a></li>
                <li><a href="">点我发现更多9</a></li>
                <li><a href="">点我发现更多10</a></li>
            </ol>
        </div>
    </div>
</body>
</html>

pckzzy114
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
flex弹性布局的理解。
06-15
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
弹性布局 flex
青蛙king的博客
09-11 949
目录 一、Flex布局是什么？ 二、基本概念 三、容器的属性 1、flex-direction 2、flex-wrap 3、flex-flow 4、justify-content 5、align-items 6、align-content 四、项目的属性 1、order ​2、flex-grow ​3、flex-shrink 4、flex-basis 5、fle...
最详细完整的flex弹性布局
热门推荐
angula
08-12 5万+
初了解 在学习弹性布局之前首先就要明白其概念 flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性 任何一个容器都可以指定为flex布局 .box{ display: flex; } 行内元素当然也可以使用flex布局 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; }
flex弹性布局详解
weixin_49115895的博客
01-12 1万+
一、什么是弹性布局 弹性布局(flex container)，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。 与传统布局的区别 传统布局，基于盒模型，依赖 display属性 、position属性 、float属性，它对于那些特殊布局非常不方便。 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex布局 操作方
教你快速上手Flex弹性盒布局（容器属性）
passerby的博客
07-13 2085
Flex弹性布局CSS3弹性盒（Flexilble Box或flexbox）是一种布局方式，常用与当页面需要适应不同的屏幕大小以及设备类型是能够确保元素拥有恰当的行为作用能够更加高效方便地控制元素的对齐，排列无论元素的尺寸是固定高度的还是动态的，都可以自动计算布局内元素的尺寸控制元素在页面内的布局方向按照不同的DOM所指定排序方式对屏幕上的元素重新排列好处可以让子元素排列在一行使子元素的高度一致。
Flex弹性布局教程-语法篇
JackieDYH的博客
06-05 1669
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于，依赖属性 +属性 +属性。它对于那些特殊布局非常不方便，比如，就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，给出常见布局的 Flex 写法。网友为本文的所有示例制作了，也可以参考。和。
flex弹性盒子布局
二木成林
02-05 821
flex弹性布局的简单使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试</title> <style type="text/css"> * { margin: 0; padding: 0; ...
CSS - 弹性布局（flex）
伏城之外的博客
07-20 2329
传统布局的不足、弹性布局、display:flex、flex-direction、主轴、侧轴、justify-content、align-items、一维布局、flex项目元素的特点、弹性宽高、flex-wrap、align-content与align-items的区别、flex-flow、flex-grow按比扩容、flex-shrink按权重比收缩、flex-basis、flex复合写法、order、align-self............
前端布局 Flex（弹性）布局
qq_63512287的博客
10-15 1万+
前端布局中的Flex布局
Flex布局
暗武逢天的博客
08-05 3万+
​ Flex 是 Flexible Box 的缩写，意为 “ 弹性布局 ” ，用来为盒状模型提供最大的灵活性。 ​ 任何一个容器都可以指定为 Flex 布局。
css——flex弹性布局之竖向布局和横向布局
qq_42683219的博客
02-15 2万+
竖向布局 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } ...
Flex布局基础知识
01-08
文章目录Flex布局Flex简介弹性容器弹性元素主轴与纵轴弹性容器样式弹性元素样式 > 本章节使用的基础代码(开启flex之前) .wrapper{ width: 800px; border: red solid 5px; } .box1,.box2,.box3{
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
flex布局Flex实现常见布局的汇总
04-11
flex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性，有了这玩意，妈妈再也不用担心我们的布局。 先简单介绍一下，要使用flex...
详解CSS中的flex容器与flex属性
12-13
flex container（flex容器 或 弹性容器） flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。 注旧版本的属性值： box：将对象作为弹性容器显示。（最老版本）inline-box：将对象...
vue的css深度选择器 deep /deep/
m0_75269526的博客
05-08 692
/deep/ ::v-deep :deep vue深度选择器，elementui调整样式不起效果当我们遇到需要在一个组件中想要影响到子组件，就可以使用深度选择器，而::v-deep 在vue3中已经启用了 /deep/ 和>>>有存预处理器不支持和浏览器兼容为题，综上所述，使用:deep()是最佳的解决方案。
使用html和css实现个人简历表单的制作
最新发布
qq_49370210的博客
05-12 775
Ⅰ、表格整体的边框为1像素，单元格间距为0，表格中前六列列宽均为100像素，第七列 为200像素，表格整体在页面上居中显示；Ⅲ、第一行合并了7列；第六 行合并了六列；照片的单元格合并了四行。Ⅱ、前五行的行高为40像素，第六行的行高为80像素，排列方式均为居中显示；CSS文件{style.css}
【CSS基础--CSS选择器的常见用法】
m0_63440113的博客
05-08 380
层叠样式表，由于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。通俗的可以认为是现代化妆。
css案例 tab上下滚动，左右滚动
weixin_38982591的博客
05-11 354
【代码】css案例 tab上下滚动，左右滚动。
grid网格布局和flex弹性布局
04-04
当然可以！下面是对grid网格布局和flex弹性布局的介绍： 1. Grid网格布局： Grid布局是一种二维布局系统，可以将页面划分为行和列的网格，通过指定元素所在的行和列，来实现灵活的布局。它具有以下特点： - 可以定义网格容器（父元素）和网格项（子元素）。 - 可以通过设置网格容器的属性来定义行和列的大小、间距等。 - 可以通过设置网格项的属性来指定其在网格中的位置、大小等。 - 支持自适应布局和响应式设计。 2. Flex弹性布局： Flex布局是一种一维布局系统，主要用于解决元素在容器中的对齐、排列和分布问题。它具有以下特点： - 可以将容器中的元素按照主轴（水平方向）或交叉轴（垂直方向）进行排列。 - 可以通过设置容器的属性来控制元素在主轴上的对齐方式、间距等。 - 可以通过设置元素的属性来控制元素在交叉轴上的对齐方式、大小等。 - 支持自适应布局和响应式设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值