flexbox弹性盒子布局

最新推荐文章于 2023-06-26 21:32:29 发布
最新推荐文章于 2023-06-26 21:32:29 发布
阅读量440 收藏
点赞数
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 标题</title>
   <META charset="utf-8">
  
   <script type="text/javascript" src="http://h5rsc.vipstatic.com/lefeng_pc/js/jquery/jquery.pack.js?20150916"></script>
   <style type="text/css">
   #demo1{
            width: 100%;
            background: #ccc;
            display: -webkit-flex;/*表示使用弹性布局*/
        }


        #demo1 .item{
            flex: 1;/*占容器的比例*/
            text-align: center;
            background:#00ff00;
            color: #000;
            padding: 5px;
            margin-left: 2px;
        }


        #demo1 .item2{
             flex: 2;/*占容器的比例*/
            text-align: center;
            background:#0000ff;
            color: #000;
            padding: 5px;
            margin-left: 2px;
        }


        #demo1 .item3{
             width:100px;
            text-align: center;
            background:#ee00ff;
            color: #000;
            padding: 5px;
            margin-left: 2px;
        }




        #demo2{
            position: absolute;
            top: 50%;
            left:50%;
            z-index: 3;
            -webkit-transform: translate(-50%,-50%);
            border-radius: 6px;
            background:#00ff00;
            border:1px solid #000;
        }


    #demo3{
    width:100%;
    height: 600px;
    background:#ccc;
    justify-content: center;
    align-items: center;
    display: -webkit-flex;/*表示使用弹性布局*/
 }


#demo3 .item{
            /*设计item是个圆形*/
            width:50px;
            height:50px;
            border-radius: 50px;
            background:#000;
            border:1px solid red;
        }
    


</style>


 
</head>
<body>
    1.混合划分
    <hr />
<div id="demo1">
        <div class="item">
            flex:1
        </div>
        <div class="item">
            flex:1
        </div>
        <div class="item2">
            flex:2
        </div>
        <div class="item3">
            我只有100px
        </div>
    </div>
<br />
不定宽高，水平垂直居中<br /><br />
2.方法1：可实现屏幕的水平垂直居中<br />


<div id="demo2">
        <p>不定宽高的水平垂直居中hhhhhhhhhhhh</p><br/>方法1
</div>
<hr />
方法2：似乎不可实现屏幕的水平垂直居中，只能实现某个容器内的水平垂直居中(容器最好是有宽高)




<div id="demo3">   <span class="item"></span> </div> 
</body>

</html>


兼容性

1，ios可以使用最新flex布局

2，Android4.4以下只能兼容旧版本的flexbox布局

3，Android4.4及以上，可以使用最新的flex布局

所以，建议使用旧版本兼容性的flexbox布局。

属性替换如下：

新flex布局 旧flexbox布局
display: -webkit-flex;
 
display: -webkit-flex-box;
justify-content: center;
 
box-pack: center;
-webkit-flex:1 -webkit-flex-box:1
align-items: center;
 
box-align: center;

 


xiaoya13144111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹性盒布局（flexbox）简要
将心_的博客
03-21 777
flex布局（弹性盒）css3弹性盒一、弹性盒设置二、flex容器属性插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 css3弹性盒 弹性盒子是 CSS3 的一种新的布局模式。 ...
AngularJS 实现弹性盒子布局的方法
10-21
本文将详细介绍如何在AngularJS中实现弹性盒子布局。 首先，我们需要了解Flexbox的基本概念。弹性盒子模型允许我们定义容器（父元素）以及其子元素（子项）的行为，以适应不同的屏幕尺寸和设备类型。主要属性包括：...
CSS弹性盒子Flexbox布局详解
小平果的欢乐谷
04-13 1万+
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。以下内容主要参考了：Flex 布局教程：语法篇一、Flex布局是什
Flexbox弹性盒子布局
jidongdesheyou_xl的博客
03-02 346
解决根据元素个数不同，自动填充容器
web学习 -- css Flexbox 弹性盒子布局
qq_39273039的博客
08-05 510
Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。 flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。
flex弹性盒子布局实例
11-08
Flexbox，全称为Flexible Box，是CSS3引入的一种布局模型，专为解决复杂的网页布局问题而设计，尤其在处理响应式设计和动态内容时表现出强大的灵活性。本实例将深入探讨Flexbox布局的基本概念、属性以及如何在实际...
CSS弹性盒子.docx
02-29
CSS弹性盒子，也称为Flexbox，是CSS3中引入的一种强大的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和不同屏幕尺寸时。它允许开发者更灵活地控制元素的排列、对齐和空间分配，使网页设计更加简洁...
基础的CSS3弹性盒Flexbox布局使用实例
12-30
flexbox是一个新的盒子模型，当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方...
Flex 弹性盒子布局
zjw_python的博客
06-01 6532
CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。 基本概念 采用Flex布局的元素，称为Flex容器（container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（item），简称”...
flexbox弹性盒子布局教程（一）
叶局长的博客
02-04 534
准备工作 在开始学习flexbox之前，你需要以下基础知识： HTML基础 CSS基础，并且知道CSS是如何工作的 为什么要学习使用flexbox(弹性盒子)? 在相当一段长的时间里，唯一具有浏览器兼容性的页面布局方法就是float(浮动) 和 position(绝对定位与相对定位) ，即便他们可以比较好的处理也页面布局，但在一些情况使用他们是十分困难的，如： 将一个元素相对于它...
弹性盒布局
weixin_58065768的博客
06-16 116
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。任何一个容器都可以指定为 Flex 布局。多用于列举布局、移动端布局、自适应布局。采用flex布局的元素，称为Flex容器，简称“容器”。弹性容器通过设置display属性的值为flex将其定义为弹性容器。
flexbox弹性盒子布局教程（二）flexbox基本概念
叶局长的博客
02-04 286
flexbox的两条轴线(axis 或 axes) 当元素被设计为一个弹性盒子，也就是元素display属性被设定为flex的时候，flexbox会根据两条轴线来进行布局 下面先对图中所出现的几个概念进行解释：                                                     ①main axis  main axis 是flexbox中的子项(f...
flexboxt弹性布局
这个少女IT男的博客
11-09 2103
CSS3 flex盒子语法介绍   张歆琳 关注 2016.06.15 11:49 字数 3104 阅读 810评论 2喜欢 28 在以前页面布局多依赖于table，但table标签太多，于是有了absolute布局，float布局等，但它们小问题特别多，要用好并不容易。CSS3里引入了Flexible Box弹性盒模型，专门用于布局。 先看一下Flexibl
css基础知识九：说说flexbox（弹性盒布局模型）,以及适用场景？
Allen-Ye博客
06-26 519
说说flexbox（弹性盒布局模型）,以及适用场景？
flexbox 弹性盒布局和布局原理
言川的博客
05-03 2万+
flexbox 弹性盒布局和布局原理 最近开始做H5，发现flexbox用的超级广泛，找到了这么一篇文章，https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错，加上自己的一些测试和理解，就有了这一篇笔记。 新版的flexbox规范分两部分：一部分是container，一部分是 items。 flexbox是一整
响应式布局：CSS3弹性盒flex布局模型
大熊的博客
01-10 1万+
页面布局一直都是web应用样式设计的重点  我们传统的布局方式都是基于盒模型的  利用display、position、float来布局有一定局限性  比如说实现自适应垂直居中  随着响应式布局的流行，CSS3引入了更加灵活的弹性布局模型 flex弹性布局 使用弹性布局可以有效的分配一个容器的空间  即使我们的容器元素尺寸改变  它内部的元素也可以调整它的尺寸来适应空间  若想让一个元素变成...
CSS3 box-flex 弹性盒子布局
qq_16546829的博客
10-14 1951
本文将从css3 box-flex的属性来讲解弹性布局 所有demo的演示地址https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 利用弹性布局五大金刚进行布局的的在线显示 https://xluos.github.io/demo/flexbox/ 入门必备  实现弹性布局必备 第一步：一般的布局首先html代码设置嵌套关系...
弹性盒子(Flex Box)详解
热门推荐
web$-小白
07-24 3万+
弹性盒子 ,flex display
css3弹性盒子布局
最新发布
08-25
CSS3弹性盒子布局（Flexbox）是一种用于创建灵活的、响应式的网页布局的技术。它通过定义容器和内部元素之间的关系来实现布局。以下是CSS3弹性盒子布局的一些基本概念和属性： 1. 弹性容器（Flex Container）：使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值