关于css3中flex布局(弹性布局/弹性盒子)

最新推荐文章于 2022-10-05 21:33:28 发布
最新推荐文章于 2022-10-05 21:33:28 发布
阅读量468 收藏 1
点赞数
分类专栏： css 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1309525802/article/details/124683476
版权

关于css3中flex布局(弹性布局/弹性盒子)

开启flex布局

开启flex只需要在父标签中使用display:flex即可让整个父标签变成flex布局

flex容器属性

justify-content

水平上子组件分布情况

  • flex-start(向左对齐)
    在这里插入图片描述

  • center(居中对齐)
    在这里插入图片描述

  • flex-end(向右对齐)
    在这里插入图片描述

  • space-around(左右二边存在相同间距)
    在这里插入图片描述

  • space-between(左右二端对齐,间距相等)
    在这里插入图片描述

  • space-evenly
    在这里插入图片描述

align-items

垂直上子组件分布情况

  • flex-start(靠上对齐)
    在这里插入图片描述

  • center(靠中对齐)
    在这里插入图片描述

  • flex-end(靠下对齐)
    在这里插入图片描述

flex-direction

子组件方向分布

  • row(同一行)
    在这里插入图片描述

  • column(同一列)
    在这里插入图片描述

  • row-reverse(同一行并反转)
    在这里插入图片描述

  • column-reverse(同一列并反转)
    在这里插入图片描述

flex-wrap

  • nowrap(当宽度大于父类宽度强行不换行)
    在这里插入图片描述

  • wrap(当宽度大于父类宽度自行换行)
    在这里插入图片描述

项目属性

order

子组件分布优先级(越小越前)
在这里插入图片描述

align-self

不继承父类的 垂直分布
在这里插入图片描述

flex-grow

确定元素是否自动填满剩余空间
在这里插入图片描述

flex-shrink

与上着相反,是否进行缩小
在这里插入图片描述

实战

实现div置于中央

<!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>
</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
<style>
    *{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        
    }
    .box{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        width: 200px;
        height:200px;
        background-color: aqua;
    }
</style>    
</body>

</html>

在这里插入图片描述

山与路
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
css弹性盒子（flex）管理系统布局
11-20
因为经常做后台管理系统，时不时都要去下一些框架，然而有时候仅仅只是需要一个页面框架布局，却需要引入一大堆文件，于是，自己用css弹性盒子（flex）简单做了一个管理系统布局，代码简单，下载即用。不是说人家...
CSS3-flex布局
mangobot的博客
10-28 870
本文主要介绍CSS3+Flex弹性布局，适用于新手入门。
CSS 3 之Flex布局（弹性布局）
L201122y的博客
03-20 118
CSS 3 之Flex布局（弹性布局）
CSS3—flex布局
懒得写
06-21 322
flex布局
CSS3 弹性布局 flex
amuist_ting的博客
08-31 136
采用flex布局的元素称为flex容器 flex容器默认存在两根轴：水平的主轴 和 垂直的交叉轴 ----flex的6种属性 flex-direction flex-wrap flex-flow justify-content align-items align-content flex-direction 决定主轴方向 row | row-reverse | column | column-reverse 默认row 主轴水平方向从左至右 column 主轴垂直方向从上至下 flex-wr...
CSS3之Flex布局（弹性布局）
YuzuruHa的博客
03-06 215
flex布局又叫弹性布局 属性为 display:flex; 设置了该属性元素即为弹性盒子，内部元素的排列会依据主轴的方向进行排列，一般默认情况下X轴为主轴，y轴为交叉轴。 弹性盒子的容器属性 flex-direction 设置主轴的对齐方向 row 默认值，横向左对齐（从左到右） column 纵向 row-reverse 反转横向（从右到左，右对齐） column-reverse 反转纵向 flex-...
css3弹性盒子flex实现三栏布局的实现
01-22
弹性盒子本身就是并排的，我们设置宽度即可。 用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex...
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
css flex 弹性布局详解
09-24
主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3 flex布局中元素左右分布
shangsiqi1的博客
11-11 5904
display:flex; justify-content:space-between
flex 左右布局_Flex布局
weixin_39519798的博客
11-30 1430
flex布局详解作者: 郭政鸿 2020/9/1前言: 早期的web主流的布局都是采用table布局, 然后就是div+float+position一把梭,H5 出来之后无非把div变成语义化标签. 但是有个css3规范里出了个非常好用的布局属性.没错,就是本文的主角flex.先上个我画的思维导图,总览一下flex布局都包含了哪些属性.目录一. flex容器的属性1) flex-dire...
【CSS3】Flex布局详解
叶子与海的博客
10-05 3596
Flex是Flexible Box 的缩写，也称为弹性盒子布局。 Flex布局组成： - flex容器（`flex container`） - flex项（`flex items`） - 主轴（`main axis`） - 交叉轴（`cross axis`） - 自动弹性伸缩 - 更轻松地设计灵活的响应式布局结构 - 精确灵活控制块级盒子的布局方式 - 在pc端和移动端都适用
CSS3 flex布局应用介绍
这个少女IT男的博客
11-09 955
转载自：张歆琳 转载地址：http://www.jianshu.com/p/06661284d14a 上一篇介绍了flex弹性盒子的语法，本篇用flex来实际布局一下。例如我们以前会用inline-block或float配合%百分比来实现自适应的三列等高布局。但margin / padding计算起来比较复杂，加加减减维护起来很麻烦。用flex弹性盒模型就简单多了。 首先弄出原始的HTML
css3 felx布局
weixin_34064653的博客
04-21 301
一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 [css].box1{ display} display:inline-flex;<spanstyle="font-family:Arial,Helvetica,sans-serif;"&gt...
CSS之flex布局
weixin_46570942的博客
05-02 1233
什么是flex布局 Flexbox布局,又称Flex布局，弹性盒子布局，就是用来为盒装模型提供最大的灵活性。Flex布局的主要思想是使父容器能够调节子元素的宽度和高度（以及排列顺序），从而能最好的填充可用空间（主要是为了适用所有类型的显示设备和屏幕尺寸）。Flex容器能够放大子元素使之尽可能的填充可用空间，也可以收缩子元素使之不溢出 采用flex布局的元素称为flex容器，它的所有子元素都称为flex项目，就是容器的成员 flex容器属性 1、flex-direction flex-direction决定.
CSS3-flex弹性布局
06-28 137
css float、flex布局；div图文布局
css3 flex使用
周家大小姐
02-15 1208
.box{display:flex;} flex的6个属性: flex-direction　　容器内项目的排列方向(默认横向排列)　　 flex-wrap　　容器内项目换行方式 flex-flow　　以上两个属性的简写方式 justify-content　　项目在主轴上的对齐方式 align-items　　项目在交叉轴上如何对齐 align-content　　定义了多根轴线的对齐方...
css 弹性盒子布局flex
最新发布
11-05
如果你想了解更多关于flex布局的知识，可以参考上面提供的链接。下面是一个简单的例子： ```css .container { display: flex; justify-content: center; align-items: center; } .item { width: 100px; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值