弹性盒模型布局实现

最新推荐文章于 2023-09-01 09:53:21 发布
最新推荐文章于 2023-09-01 09:53:21 发布
阅读量105 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55041880/article/details/115433684
版权

弹性盒模型 Flexbox 图片布局 align-self flex-wrap
关键词由CSDN通过智能技术生成

利用弹性盒模型实现图片布局

实现图中效果里插入图片描述

在这里插入代码片<!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>
        .wrap{
            width: 300px;
            height: 300px;
            background-color: gray;
            display: flex;
        }
        .wrap div{
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 50%;
        }
      
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
        <div style="align-self: center;"></div>
        <div style="align-self: flex-end;"></div>
    </div>
</body>
</html>

在这里插入图片描述

在这里插入代码片<!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>
        .wrap{
            width: 300px;
            height: 300px;
            display: flex;
            background-color: blanchedalmond;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .wrap div{
            width: 100px;
            height: 100px;
            background-color: coral;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div style="align-self: flex-end;"></div>
    </div>
</body>
</html>

在这里插入图片描述

在这里插入代码片<!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>
        .wrap{
            width: 300px;
            height: 100px;
            background-color: cornsilk;
            display: flex;
            
        }
        .w3{
            width: 300px;
            height: 100px;
            background-color: cornsilk;
            display: flex;
            justify-content: center;
        }
        .w2{
            width: 300px;
            height: 100px;
            background-color: cornsilk;
            display: flex;
            justify-content: space-between;
        }
        .wrap div{
            width: 100px;
            height: 100px;
            background-color: darkkhaki;
            border-radius: 50%;
        }
        .w2 div{
            width: 100px;
            height: 100px;
            background-color: darkkhaki;
            border-radius: 50%;
        }
        .w3 div{
            width: 100px;
            height: 100px;
            background-color: darkkhaki;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        
    </div>
    <div class="w3">
        <div></div>
    </div>
    <div class="w2">
        <div></div>
        <div></div>
    </div>
</body>
</html>
小可同学啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS—弹性盒子布局（一看就懂）
张浔CSDN
10-31 2550
文章目录（PS：觉得不错请点赞收藏支持一下）一、布局之间的关系二、`flex` 布局2.1 `flex` 布局是什么2.2 基本概念2.3 容器的属性2.3.1 `flex-direction`属性2.3.2 `flex-wrap`属性2.3.3 `flex-flow` 属性2.3.4 `justify-content` 属性2.3.5 `align-items`属性2.3.6 `align-content` 属性2.4 项目的属性2.4.1 `order` 属性2.4.2 `flex-grow`属性2.4
CSS弹性盒模型flex在布局中的应用详解
09-24
CSS弹性盒模型（Flexbox）是一种现代的布局模式，它为复杂的网页布局提供了一种更为灵活的方法。在传统的CSS布局中，如浮动和定位，往往难以处理多行或多列的动态内容，而Flexbox则可以轻松实现这些需求。本文将深入...
html5图片弹性布局,html5--6-65 布局4-弹性布局
weixin_30151565的博客
06-09 727
html5--6-65 布局4-弹性布局实例学习要点掌握传统布局与CSS3新增弹性布局方式的实现和应用弹性布局(弹性伸缩布局)事实上它是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局。比较新的布局方式：旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间(主要是为了容纳所有类型...
滚动轴不占用滚动区域； 容器添加背景图片添加； 弹性盒模型align-self、order属性
Anyway_han的博客
07-15 218
易忘的CSS样式属性
弹性盒布局（如何弹性管理你的页面布局）---自适应布局
weixin_43985618的博客
08-12 2592
弹性盒布局（flexbox） 一、弹性盒布局介绍 1)弹性盒也叫伸缩布局盒模型 它是**css3引入的一种新的布局模式——flexbox**布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更便利于开发。 2)主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大...
CSS3弹性盒子布局
aiolos1111的专栏
07-29 9689
CSS3中引入的弹性盒子布局已经有一段时间，也经历了几次比较重大的修改，可本人一直都没怎么使用过这种布局，惭愧万分！这几天研究了一下这种布局方式，记录一下学习笔记，以后日后用到时过来查看。       2016年5月26日，W3C(官网：https://www.w3.org/ )组织发布了CSS3弹性盒子布局最新的CR版本： 网址：https://www.w3.org/TR/2016/CR-css
【前端】CSS-Flex弹性盒模型布局
最新发布
山赶着山，山山漫漫结成关
09-01 6494
CSS弹性盒子（Flexbox）是一种强大而灵活的布局模型，能够简化我们对网页布局的控制，并使页面在不同设备上的适应性更强。本文将介绍CSS弹性盒子的基本概念、属性和使用方法，帮助你更好地掌握弹性盒子布局。决定主轴的方向（即项目的排列方向）弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap定义了项目在主轴上的对齐方式定义项目在交叉轴上如何对齐定义了多根轴线的对齐方式。
弹性盒模型实现两栏布局
weixin_47409897的博客
04-28 1700
思路： 首先对html，body设置高度为100%，并且对body设置为相对定位，把头部和底部，用定位的方式固定好，使用弹性盒模型，中间占据剩余的等份，但是由于绝对定位不暂居空间，因此需要设置maging或者padding，距离上下的高度。 然后对main里面进行分割，对main使用弹性盒模型，宽设置好，高度为100%,中间占据剩余空间即可。 HTML <header>1<...
弹性盒模型布局方式
civet_me的博客
07-07 1159
问题提出 在做前端页面的时候，经常会遇到几个问题 1、布局问题，左右两列布局，左侧固定宽度，右侧自适应；左中右三列布局，左右固定宽度，中间自适应； 2、一个div，上下左右居中； 在前端工作中，这两个问题可以说是层出不穷。在布局上有经典的双飞翼布局、圣杯布局等。这些布局就是利用float、position等属性，使其中一部分脱离文档流。而div上下左右居中，...
【Css】使用弹性盒实现三栏布局
点滴记忆
05-08 342
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
css3弹性盒子flex实现三栏布局的实现
01-22
弹性盒子本身就是并排的，我们设置宽度即可。 用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex...
移动端页面（弹性盒模型布局）
08-23
在移动端页面设计中，弹性盒模型布局（Flexbox Layout）是一种强大的工具，它极大地简化了复杂的多列布局问题。此布局模式允许元素在容器中灵活地调整大小和位置，无论屏幕尺寸如何变化，都能保持良好的视觉效果。在...
uni-app实现登录注册功能
m0_55041880的博客
06-21 8727
<template> <view class="content"> <view class="zhuce"> <text>注册</text> <input type="text" v-model="zUser" value="" placeholder="请输入用户名"/> <input type="text" v-model="zPass" password="true" value="" placeh
vue-生成随机颜色
m0_55041880的博客
06-28 2797
生成随机颜色代码为 this.color = rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)}); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa.
checkbox-group:多项选择器
m0_55041880的博客
06-18 1674
checkbox-group:多项选择器 内部由多个checkbox组成 属性说明如下: @change:选中项发生改变是触发的change事件 value:选中时触发的change事件 并携带的value 通过ev.detail.value()判断谁被选中 <template> <view class="content"> <checkbox-group name="" @change="ch"> <label v-for="(item,i.
弹性盒模型容器样式和对齐方式
m0_55041880的博客
04-04 1530
弹性盒模型容器样式 首先是设置在容器上的样式 display:flex——将容器设置成弹性盒子，项目(子元素)的排列方式将按照弹性盒子规则进行排布 flex-direction——设置主轴方向，项目默认会按照主轴方向进行排列 flex-wrap——当项目总宽度大于容器宽度时的处理方式，默认会不换行，压缩所有项目 flex-flow——flex-direction属性和flex-wrap属性的简写 默认值为row nowrap
vue 实现元素的显示和隐藏效果
m0_55041880的博客
06-16 988
<template> <view class="content"> <view class="" v-show="bOn">我是第一个view</view> <button @click="ch">显示/隐藏</button> </view> </template> <script> export default { data() { return { bOn : t
canvas画布绘制文字和图片
m0_55041880的博客
06-26 767
文字绘制 oCG.font = “30px bold 宋体”;//设置字体 oCG.fillStyle = “red”;//设置颜色 oCG.textAlign = “left”;//设置水平对齐方式 oCG.textBaseline = “middle”;//设置垂直对齐方式 oCG.fillText(“要写的文字”,200,100);//绘制文字 指定坐标 // 对齐方式和指定坐标有关系 例如上面就是文字左边的坐标为200，100 绘制图片 var img = new Image();//创建行.
弹性盒模型 实现自适应布局
04-20
对于问题“弹性盒模型实现自适应布局”，我可以回答。弹性盒模型是一种布局模式, 可以帮助我们创建灵活的布局，它主要用于解决传统布局存在的尺寸限制、排列限制等问题。通过设置弹性容器属性，我们可以轻松地实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值