CSS 弹性布局 flex

最新推荐文章于 2024-08-28 23:58:56 发布
最新推荐文章于 2024-08-28 23:58:56 发布
阅读量47 收藏
点赞数
分类专栏： CSS 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120738321
版权

CSS Flex布局 居中布局 弹性盒模型 布局方向
关键词由CSDN通过智能技术生成

弹性布局 display:flex;
居中等分 justify-content:center;
布局方向(方向 direction;行 row;列 column) flex-direction:column;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>flex 弹性布局</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 弹性布局 display:flex;
        居中等分 justify-content:center;
        布局方向(方向 direction;行 row;列 column) flex-direction:column;
     -->
    <style>
        .box {
            /*弹性布局 flex*/
            display: flex;
            /*居中等分*/
            /*justify-content: center;*/
            /*justify-content: space-around;*/
        }

        .box span {
            flex: 1;
            height: 100px;
            /*background-color: aqua;*/
            margin: 5px;
            /*width: 300px;*/
        }

        .ad span {
            margin: 2px;
            width: 300px;
            /*height: 150px;*/
            flex: 1;
        }

        .ad {
            height: 500px;
            /*弹性布局*/
            display: flex;
            /*布局方向(方向 direction) flex-direction:column;行(row) 列(column)*/
            flex-direction: column;
        }
    </style>
</head>
<body>
<div class="box">
    <span style="background-color: green">s1</span>
    <span style="background-color: pink">s2</span>
    <span style="flex:3;background-color: #10f574">s3</span>
    <span style="background-color: deepskyblue">s4</span>
</div>
<div class="ad">
    <span style="background-color: forestgreen"></span>
    <span style="background-color: palevioletred"></span>
    <span style="background-color: blueviolet"></span>
</div>
</body>
</html>
卋舉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 弹性布局 flex 详解
2301_76669854的博客
11-28 1479
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的。align-self属性允许单个项目有与其他项目不一样的对齐方式，（4）justify-content 项目在主轴上的对齐方式。（默认,不换行 / wrap（换行,第一行在上方）/（和父元素的align-self值一致）/（默认，主轴为水平方向，起点在左）/（项目的第一行文字的基线对齐）/
css弹性布局flex
ZWJAS的博客
01-06 677
flex布局，弹性布局，代替float，针对div容器任何一个容器都可以指定为Flex布局。flex布局的使用步骤：1、开启flex布局，display:flex;布局块级元素布局行内元素2、设置主轴方向，默认的主轴是横向，​ 3、设置侧轴（交叉轴）： align-items：行内元素也可以使用Flex布局。以下写法代表将display：inline和display:flex结合起来:设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
CSS弹性布局 Flex属性
weixin_48661004的博客
12-13 1671
CSS弹性布局 Flex属性 自适应布局 flex属性
【CSS】弹性布局 flex
m0_50947589的博客
04-27 416
标签属性 display: flex;/* 父级占满全屏 */ display: inline-flex;/* 父级大小由子级内容撑开，符合行块内容的特性 */ 最适合小规模布局，大规模布局用网格。 在子级写宽高可能无法应用，子级的大小取决于父级。 写在父级的属性： flex-direction，flex-wrap，flex-flow，justify-content，align-items， align-content flex-direction: row ; 作用：用来检索子级的排列
CSS-flex弹性布局
yen_zz的博客
04-12 496
1.认识flex Flex的发展史 2009年W3C 提出概念，但是官方没有flex这个词 2011年浏览器厂商决定使用flexbox，来形容它的布局特点 2015年W3C正式将其修改为flexbox布局 2016年5月官方正式公布最新的稳定的flex布局规范标准，各大浏览器的支持越来越稳定 定义 Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 作用 它能够更加高效方便的控制元素的对齐、排列 可以自动计算布局内元素的尺寸，无论这个元素的尺寸
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
2401_84152825的博客
04-19 949
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-giLHKEZa-1713474385859)]
CSS——Flex弹性布局及flex-grow与flex-shrink的计算
GoodLuck_wu5的博客
07-31 502
一、Flex布局 flex布局就是将盒子变成弹性盒子， 任何一个盒子都可以变成弹性盒子display: flex 行内元素也可以使用 Flex 布局 display: inline-flex 注意： 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 二、容器的属性
跟面试官扯了半小时的CSS的flex弹性布局，都在这里了。【看完你会更加透彻】
01-08
在理解CSS的flex弹性布局之前，首先需要了解怪异盒模型。在标准盒模型中，元素的总大小由width/height、padding、border和margin组成，而在怪异盒模型中，元素的总大小仅包含width/height和margin。怪异盒模型更接近...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
《CSS 3D 变形探秘：开启网页设计新维度》
最新发布
qq_69304031的博客
08-28 264
可以分别控制 x 轴、y 轴和 z 轴的缩放比例，实现不同方向的拉伸或压缩。transform scale(sx,sy，sz)表示html元素沿x轴的缩放比为sx，沿y轴的缩放比为sy，沿z轴是z如果sy省略，默认sy=sx。transform scale(sx,sy)表示html元素沿x轴的缩放比为sx，沿y轴的缩放比为sy，如果sy省略，默认sy=sx。函数可以使元素沿 x 轴或 y 轴倾斜，为设计带来独特的视角效果。ranslate(tx,ty,tz]:沿x轴移动tx距离，沿y轴移动ty的距离。
CSS中的align-content属性：实现垂直居中的新方式
weixin_45274678的博客
08-28 641
在CSS中，align-content属性原本主要用在Flexbox和Grid布局中，用于控制交叉轴（crossaxis）上内容的对齐方式。但在2024年，浏览器开始支持在默认布局（flowlayout）中使用align-content，从而实现了使用单一CSS属性即可实现垂直居中的效果。align-content属性的引入为CSS的垂直居中问题提供了一个全新的解决方案。通过使用这一属性，我们可以在默认布局中轻松实现内容的垂直居中，而无需依赖Flexbox、Grid或其他复杂的布局方式。
CSS系列之详解overflow（四）
易雪寒的博客
08-28 64
CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。如果没有明确设置宽度和高度，浏览器将会自动根据内容进行调整，此时 overflow 属性可能不会产生预期的效果。
CSS学习
2301_77205900的博客
08-28 413
CSS全称Cascading Style Sheets一种样式表语言，为html标签修饰定义外观，分工不同CSS与HTML关系html是网页的内容css是网页的样式（结构）
CSS实现水滴效果图
N201871643的博客
08-26 44
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
Nuxt 项目实战 - 15：自定义unocss规则，让编写样式更高效
Potter：I am not for learning and learning, but for study and work
08-28 165
看到这个你发现问题了，由于我们颜色变量引用的是16进制颜色值，然后rgba的参数是4个，而且是用逗号隔开。可能你会想编译后改样式，类似webpack的css loader一样，但是我们会失去unocss的提示，在开发的时候还是很不方便。如果你有兴趣，欢迎加入你的加入，一起完善这个工具。，可以帮你一键将markdown发布至多平台，方便大家更好的传播知识和分享你的经验。说明：你可能会想到改unocss的规则，那么我们来试下。完美实现我们想要的效果，这样就可以更开心的写样式了。最近我开源了一个文章助手。
要隐藏滚动条，您可以使用CSS中的overflow属性。
爱敲代码的卡拉米的博客
08-28 193
请注意，隐藏滚动条可能会导致内容被截断或无法访问到超出视图范围的内容。请确保在隐藏滚动条时考虑到用户体验和页面布局。希望这个解决方案对您有帮助！如果有任何问题，请随时告诉我。元素的滚动条隐藏起来。确保将这段样式代码添加到您的Vue组件的样式部分中，并且根据需要调整选择器以匹配您想要隐藏滚动条的元素。要隐藏滚动条，您可以使用CSS中的。
CSS系列之浮动清除clear（三）
易雪寒的博客
08-28 138
可以看到我们的底部盒子不在原来的位置了，原因是什么呢,原因就是此时父元素我们并没有给他设置高度，父元素的高度完全是1号2号盒子撑起来的，现在给1号2号盒子添加了浮动，不占据原来的位置了，所以父元素此时的高度为零，不占位置了，底部盒子就会上去,造成高度塌陷。直接给第二个盒子添加一个clear:left 这里需要注意,clear消除的是上一个盒子对自己的影响，所以，前面一个盒子往哪边浮动，我们就clear哪边，这里的上一个盒子是float:left，所以我们在第二个盒子上添加的也是clear:left。
css隐藏元素
weixin_42812634的博客
08-28 88
css实现隐藏元素的方法有哪些 display:none; 元素被移除，不占据空间 visibility:hidden; 元素不可见，但是占据空间 opacity:0; 元素不可见，但是占据空间 position:absolute; left:-999px; width:0; height:0; overflow:hidden;
扑捉一只耿鬼（HTML文件）
每一次跌倒都是为了华丽的站起来。
08-28 279
捕捉一只耿鬼
css 弹性盒子布局flex
11-05
flex布局是一种新的布局方式，它可以非常优雅地实现子元素的居中或均匀分布，甚至可以随着窗口缩放自动适应。相比于传统的布局方式，flex布局更加灵活，可以更好地适应不同的屏幕尺寸和设备。在小程序中，flex布局是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值