弹性盒模型flexBox

弹性盒模型是c3的一种新的布局模式

它是指一种当页面需要适应不同屏幕大小以及设备类型时，确保元素有恰当行为的布局方式。

引入弹性盒模型布局的目的是提供一种更有效的方法来对一个容器中的子元素进行排列、对齐和分配空白空间。

兼容性

IE11

弹性盒模型内容

弹性盒模型由弹性容器（flex container）和弹性子  元素（flex item）组成

将父容器设置display:flex转换为弹性容器

介绍几个常用方法：

flex-direction: 

row:横向从左到右排列，默认

row-reverse:横向从右到左排列（最后一项在最前面）

column:纵向排列

column-reverse:反转纵向排列（最后一项排在最上面）

justify-content:

　　flex-start:起始点对齐（左对齐）

　　flex-end:终止点对齐（右对齐）

　　center:居中对齐

　　space-around:四周环绕

　　space-between:两端对齐

让盒子水平垂直居中的方法：

1 使用弹性盒模型 display:flex + justify-content:center + align-items:center

    <style>

       .box{

           width: 400px;

           height: 300px;

           display: flex; 让盒子变成弹性盒模型

           justify-content: center; 居中

           align-items: center;  居中

           background-color: pink;

       }

       .child{

           width: 150px;

           height: 150px;

           background-color: skyblue;

       } 

    </style>

</head>

<body>

<div class="box">

    <div class="child"></div>

</div>

2 使用position:absolute + transform:translate

     .box{

           width: 400px;

           height: 300px;

           position: relative;

           background-color: pink;

       }

       .child{

           width: 150px;

           height: 150px;

           background-color: skyblue;

           position: absolute;

           top: 50%;

           left: 50%;

           transform:translate(-50%,-50%)

       } 

    </style>

</head>

<body>

<div class="box">

    <div class="child"></div>

</div>

【css】弹性盒模型的更多相关文章

  1. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  2. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  3. CSS——弹性盒模型

    弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 这东 ...

  4. CSS弹性盒模型flex概念

    盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...

  5. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  6. CSS弹性盒模型 box-flex

    目前没有浏览器支持boc-flex属性. Firefox支持代替的-moz-box-flex属性 Safari.Opera以及Chrome支持替代的-webkit-box-flex属性 box-fle ...

  7. css 弹性盒模型Flex 布局

    参考文章:http://www.runoob.com/w3cnote/flex-grammar.html Flex 布局是什么:采用Flex布局的元素,称为Flex容器(flex container) ...

  8. css和css3弹性盒模型实现元素宽度（高度）自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  9. 关于ie中实现弹性盒模型-我的css

    css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...

  10. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

随机推荐

  1. JavaScript Match

    JavaScript Match 版权声明:未经授权,严禁转载! 随机数 // 随机数 Math.random() 随机生成一个大于等于0且小于1的小数. // 0>= r < 1 [0, ...

  2. 利用.bat(批处理)来删除KEIL编译生成的无用文件

    新建一个.txt文件. 在里面输入如下内容: del *.bak /s del *.ddk /s del *.edk /s del *.lst /s del *.lnp /s del *.mpf /s ...

  3. UVa 12627 Erratic Expansion - 分治

    因为不好复制题目,就出给出链接吧: Vjudge传送门[here] UVa传送门[here] 请仔细看原题上的那幅图,你会发现,在时间t(t > 0),当前的气球构成的一幅图,它是由三个时间为( ...

  4. [c/c++]指针（3）

    在指针2中提到了怎么用指针申配内存,但是,指针申配的内存不会无缘无故地 被收回.很多poj上的题都是有多组数据,每次地数组大小会不同,所以要重新申请 一块内存.但是原来的内存却不会被收回,也是说2.3 ...

  5. java.lang.NoClassDefFoundError错误

    根据前文,很明显NoClassDefFoundError的错误是因为在运行时类加载器在classpath下找不到需要加载的类,所以我们需要把对应的类加载到classpath中,或者检查为什么类在cla ...

  6. CMD运行后关闭CMD 的窗口命令

    在命令前加上Start 例(打开服务管理):start services.msc

  7. C# MVC框架初学者

    推荐网站:http://blog.csdn.net/zhuyu19911016520/article/category/6318590

  8. uboot下的命令使用示例

    1.usb 可以使用此命令读取u盘里的内容,此命令加上相关参数可以有以下功能: 1.1usb start 在使用u盘之前必须启动此命令以初始化好fat文件系统环境,笔者的输出如下: jello # u ...

  9. 【第十三章】 springboot + lombok

    lombok作用:消除模板代码. getter.setter.构造器.toString().equals() 便捷的生成比较复杂的代码,例如一个POJO要转化成构建器模式的形式,只需要一个注解. 注意 ...

  10. React Native API之 ActionSheetIOS

    ok!先来演示是下效果: 官网教程:http://reactnative.cn/docs/0.31/actionsheetios.html#content 上代码:引入API组件: import Re ...