CSS 弹性布局 flex 三

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

弹性布局 display:flex;
等分居中,水平居中 justify-content:center;
居中对齐(项目 items) align-items:center;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 弹性布局 display:flex;
        等分居中,水平居中 justify-content:center;
        居中对齐(项目 items) 垂直居中 align-items:center;
     -->
</head>
<body>
<style>
    @font-face {
        font-family: 'caoshu';
        src: url("fonts/caoshu.TTF");
    }

    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh; /*100vh 相当于100%*/
        /*弹性布局*/
        display: flex;
        /*等分居中,水平居中*/
        justify-content: center;
        /*居中对齐(项目 items),垂直居中*/
        align-items: center;
    }

    .box {
        width: 300px;
        height: 250px;
        margin: 5px;
        background-color: aqua;
        /*字号 行高*/
        font: 50px/30px 'caoshu';
        line-height: 250px;
        text-align: center;
    }
</style>
<div class="box">雪中</div>
<div class="box">悍刀</div>
</body>
</html>
卋舉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中的弹性盒子总结
m0_55870194的博客
03-23 647
一、弹性盒布局相关词汇 图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。 1.弹性容器(Flex container) 包含着弹性项目的父元素。通过设置 display属性的值为 flex或 inline-fle来定义弹性容器。 2.弹性项目(Flex item) 弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。 3.轴(Axis) 每个弹性框布局
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
2401_84152825的博客
04-19 960
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-giLHKEZa-1713474385859)]
FLEX3中应用CSS完全详解手册
jCuckoo的专栏
10-24 1091
在FLEX中使用样式方法                  ---转载http://bbs.airia.cn一、使用本地样式定义使用标签在MXML文件中创建本地的样式定义。这个标签包含了符合CSS2.0语法的样式表定义。这些定义会应用到当前文档以及当前文档的子文档。.solidBorder{//类选择样式border-style:solid;}button{//组件定义样式border-sty
少小白学前端——css篇(flex布局)
最新发布
Another_World_Naraku的博客
07-31 1538
其中，采用该样式的元素被称为容器（container），而它的子元素则称为item。容器上默认有两根轴线：水平的主轴（main axis）和垂直的交叉轴（cross axis），子元素item则根据轴线排列。
css-flex布局3（总结）
jieweiwujie的博客
08-28 272
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&g...
CSS - Flex（三）
牧码的博客
03-14 380
一、flex-direction:（元素排列方向） 1、flex-direction: row（横向从左到右排列==左对齐） 2、flex-direction: row-reverse（与row 相反） 3、flex-direction: column（从上往下排列==顶对齐）​​​​​​​ 4、flex-direction: column-reverse（与column 相反......
CSS3 弹性盒子(Flex Box)
热门推荐
qq_52301431的博客
04-05 1万+
25、CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 案例，实现水平垂直居中： 正在上传…重新上传取消 绝对定位与负边距实现 #container{ position:relative; } ..
CSS弹性布局 Flex属性
weixin_48661004的博客
12-13 1681
CSS弹性布局 Flex属性 自适应布局 flex属性
css3弹性盒子flex实现三栏布局的实现
01-22
用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
跟面试官扯了半小时的CSS的flex弹性布局，都在这里了。【看完你会更加透彻】
01-08
在理解CSS的flex弹性布局之前，首先需要了解怪异盒模型。在标准盒模型中，元素的总大小由width/height、padding、border和margin组成，而在怪异盒模型中，元素的总大小仅包含width/height和margin。怪异盒模型更接近...
css3-flex布局：基础使用 / Flexbox布局
snowball的博客
08-15 1526
该属性的值决定了 Flex 项目的伸缩性，它能够让 Flex 项目在 Flex 容器中的尺寸发生变化，以适应不同的屏幕尺寸或者容器大小。4.2、Flex项目（Flex Item）：Flex 容器中的子元素称为 Flex 项目（Flex Item），每个 Flex 项目都具有弹性盒的属性。在该轴上，Flex 容器中的 Flex 项目会被依次排列。Flex容器是包含Flex项目的父级元素，通过设置该元素的display属性为flex或inline-flex，即可创建一个Flex容器。
Flex 布局：语法篇
wgaoxian的博客
10-23 218
Flex 布局：语法篇 语法 display:flex Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必...
CSS3 flex弹性布局
xiangxiongfly
07-21 1628
CSS3新增了一种新型的弹性盒子模型。通过弹性盒子模型，我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易。 此外记住一点：在使用弹性盒子模型之前，你必须为父元素定义display:flex;或display:inline-flex;，这样父元素才具有弹性盒子模型的特点。
CSS 3 之Flex布局（弹性布局）
L201122y的博客
03-20 131
CSS 3 之Flex布局（弹性布局）
CSS3 - flex属性
idomyway的博客
06-02 1507
前言     CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。 这是一个简写属性，用来设置 flex-grow flex-shrink flex-basis     flex-grow 属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。   &n...
css display:flex 3列显示
weixin_42593549的博客
01-10 1061
可以使用 flexbox 布局实现3列显示。 首先，需要将父容器的 display 设置为 flex。然后，可以在父容器中使用 flex-wrap 属性来让容器自动换行，并设置 flex-direction 为 row，表示排列方向为横向。最后，可以使用 flex-basis 属性来设置子元素的宽度。 示例代码： .parent { display: flex; flex-wrap: wr...
css3 flex使用
周家大小姐
02-15 1218
.box{display:flex;} flex的6个属性: flex-direction　　容器内项目的排列方向(默认横向排列)　　 flex-wrap　　容器内项目换行方式 flex-flow　　以上两个属性的简写方式 justify-content　　项目在主轴上的对齐方式 align-items　　项目在交叉轴上如何对齐 align-content　　定义了多根轴线的对齐方...
css flex
Cribug8080的博客
06-11 573
flex 是 flex-grow、flex-shrink、flex-basis的缩写。 flex-grow：用于设置或检索弹性盒的扩展比率。用人话说就是，是其他盒子的几倍。 flex-shrink：用于设置或检索弹性盒的收缩比率。是其他盒子的几分之一。例如：flex-shrink: 3表示是其他盒子的三分之一 flex-basis：设置或检索弹性盒伸缩基准值。 ...
深入剖析CSS弹性盒模型Flex布局
深入剖析CSS弹性盒模型flex CSS 弹性盒模型（flex）是一种新的布局模型，引入于 CSS3 中，提供了一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕。flex 是 flexible box 的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值