Flex弹性容器基础页面布局

最新推荐文章于 2024-11-12 22:56:44 发布
最新推荐文章于 2024-11-12 22:56:44 发布
阅读量53 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pckzzy104/article/details/132536178
版权 
<!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>

pckzzy104
关注
Flex 弹性布局一——flex 容器及设置在容器上的属性
学习资源
11-24 578
Flex 弹性布局一——flex 容器及设置在容器上的属性
flex弹性布局(详解)
msq6678的博客
07-21 1万+
Flex弹性盒布局前言布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提出了一种新的方案—— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一、什么是Flex弹性布局？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的。
弹性布局 flex
青蛙king的博客
09-11 1821
目录 一、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布局（弹性布局）
ORANGE_3iING的博客
08-10 9773
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式对父容器设置的属性作用属性值设置主轴的方向row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上设置主轴上的子元素排列方式> 注意:使用这个属性之前一定要确定好主轴是哪个flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右flex-end：从尾部开始排列center：在主轴居中对齐(如果主轴是x轴则水平居中)space-around：平分剩余空间。
最详细完整的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布局 操作方
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 15万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
flex 弹性布局还不懂？一篇文章带你了解一下
凡夫编程
06-24 939
Flex布局，全称为Flexible Box布局，或简称Flexbox，是一种由W3C提出用于网页设计的新型布局模式。它旨在提供一个更加有效且灵活的方式来布局、对齐和分配容器内项目的空间，无论是行还是列方向。Flex布局特别适用于响应式和动态调整的用户界面设计，特别是在不同屏幕尺寸和设备上实现一致的布局效果。在Flex布局中，父容器被设置为display: flex;或display: inline-flex;后，就变成了一个Flex容器。这个容器内的所有直接子元素自动成为Flex项目。
Flex弹性布局教程-语法篇
JackieDYH的博客
06-05 1765
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于，依赖属性 +属性 +属性。它对于那些特殊布局非常不方便，比如，就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，给出常见布局的 Flex 写法。网友为本文的所有示例制作了，也可以参考。和。
flex弹性盒子布局
二木成林
02-05 989
flex弹性布局的简单使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试</title> <style type="text/css"> * { margin: 0; padding: 0; ...
教你快速上手Flex弹性盒布局（容器属性）
passerby的博客
07-13 2409
Flex弹性布局CSS3弹性盒（Flexilble Box或flexbox）是一种布局方式，常用与当页面需要适应不同的屏幕大小以及设备类型是能够确保元素拥有恰当的行为作用能够更加高效方便地控制元素的对齐，排列无论元素的尺寸是固定高度的还是动态的，都可以自动计算布局内元素的尺寸控制元素在页面内的布局方向按照不同的DOM所指定排序方式对屏幕上的元素重新排列好处可以让子元素排列在一行使子元素的高度一致。
跟面试官扯了半小时的CSS的flex弹性布局，都在这里了。【看完你会更加透彻】
01-08
在理解CSS的flex弹性布局之前，首先需要了解怪异盒模型。在标准盒模型中，元素的总大小由width/height、padding、border和margin组成，而在怪异盒模型中，元素的总大小仅包含width/height和margin。怪异盒模型更接近...
弹性布局-flex布局.zip
05-18
Flex布局，全称为“Flexible Box”或“弹性盒布局”，是CSS3中一种用于处理容器内元素布局的模型。它旨在提供一个更加灵活、响应式的布局方式，尤其适用于多设备环境，如手机、平板电脑等移动设备。在传统布局模式下...
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. ...
第8章利用CSS制作导航菜单
最新发布
KO2131855283的博客
11-12 712
利用CSS为超链接重新设置样式，包括对a:link和a:visited这两个伪类的设置，以此来分别表示超链接未被访问和已被访问的状态，同时将其display属性设为block，这样就能把超链接变成块级元素，进而可以为超链接设置80像素的宽度，满足特定的页面布局需求。与此同时，针对大标题文字的 CSS 样式也要进行设定，这包括规定高度值，设置合适的行高，确定文字颜色（可依据设计风格选择不同色彩）以及文字的对齐方式（如居中对齐、左对齐等），以此来达到理想的视觉呈现效果，提升导航栏和标题的美观度与可读性。
第8章 利用CSS制作导航菜单.
w_wx8866的博客
11-11 663
我们在浏览网页的时候可以看见许多位于顶部的导航栏，供我们点击跳转。
CSS中常见文本居中技巧详解
2301_76541209的博客
11-11 488
在网页设计中，文本居中是非常常见且重要的布局需求之一。无论是为了美观还是为了更好地传达信息，掌握文本居中的方法对于前端开发者来说都是必不可少的技能。本文将详细介绍几种常用的CSS文本居中方法，帮助读者解决实际开发中的问题。
CSS实现图片3D立体效果
Jinuss的博客
11-08 878
CSS实现图片3D立体效果
Flex弹性布局详解与用法
flex弹性布局是一种强大的CSS布局模式，允许开发者更加灵活地控制元素在容器中的排列和大小调整。使用`display: flex`开启弹性布局后，子元素的行为会发生显著变化，如不再遵循传统的块级元素行为，它们可以在一行内...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值