弹性盒模型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. FSMC（STM32）

    (一)FSMC:Flexible Static Memory Controller,可变(灵活)静态存储控制器 小容量产品是指闪存存储器容量在1 6K至32K 字节之间的STM32F101xx.STM ...

  2. 重写（override）与重载（overload）的区别

    一.重写(override) override是重写(覆盖)了一个方法,以实现不同的功能.一般是用于子类在继承父类时,重写(重新实现)父类中的方法. 重写(覆盖)的规则: 1.重写方法的参数列表必须完 ...

  3. 常用字符与ASCII代码对照表

    常用字符与ASCII代码对照表 为了便于查询,以下列出ASCII码表:第128-255号为扩展字符(不常用) ASCII码 键盘 ASCII 码 键盘 ASCII 码 键盘 ASCII 码 键盘 27 ...

  4. UVa 11292 勇者斗恶龙

    https://vjudge.net/problem/UVA-11292 题意:有n条任意个头的恶龙,你希望雇一些其实把它杀死.一个能力值为x的骑士可以砍掉恶龙一个直径不超过x的头,且需要支付x个金币 ...

  5. Redis集群学习笔记

    Redis集群学习笔记 前言 最近有个需求,就是将一个Redis集群中数据转移到某个单机Redis上. 迁移Redis数据的话,如果是单机Redis,有两种方式: a. 执行redis-cli shu ...

  6. ubuntu16.04上安装tomcat7

    sudo apt-get update sudo apt-get install tomcat7 启动:sudo service tomcat7 start 访问http://127.0.0.1:80 ...

  7. 测试报告 之 testNG + Velocity 编写自定义html测试报告

    之前用testNG自带的test-outputemailable-report.html,做出的UI自动化测试报告,页面不太好看. 在网上找到一个新的报告编写,自己尝试了一下,埋了一些坑,修改了输出时 ...

  8. MAC下Java安装之后的路径

    pwd /Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home 安装好jdk之后,就开始配置环境变量了. 首先,在终端输入 s ...

  9. [ios]Xcode常用快捷键

    参考:http://www.linuxidc.com/Linux/2012-08/67905.htm Xcode常用快捷键 隐藏xcode command+h退出xcode command+q关闭窗口 ...

  10. JavaScript权威指南--事件处理

    知识要点 客户端JavaScript程序采用了异步事件驱动变成模型(13.3.2节).这种风格并不只应用于web编程,所有使用图形用户界面的应用程序都采用它,它们静待某些事件发生,然后响应. 事件就是 ...