1.弹性布局是什么

在移动端一种方便的布局方式,打破了之前用浮动,定位的布局,更加灵活。

2.弹性布局的格式

包含父元素和子元素,有对应的属性应用在父元素和子元素达到布局的目的

3.父元素的属性

要开启弹性布局,父元素要先加上一个flex属性

display: -webkit-flex; /* Safari */
display: flex;

当然,行内元素也可以用弹性布局,同样父元素要加上flex属性

display: inline-flex;

另外父元素还可以加上下面6个属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

用的比较多的就2个属性,子元素的水平和垂直对齐

//子元素水平排列
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;

}
//子元素垂直排列
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

4.子元素属性

用的最多的就是flex属性(包含了flex-grow, flex-shrink 和 flex-basis)

flex-grow表示放大比例,默认为0,flex-shrink缩写比例,默认为1。flex-basis表示子元素宽度,默认auto

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

参考资料:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

css弹性布局的更多相关文章

  1. [前端随笔][css] 弹性布局

    说在前面 弹性布局,顾名思义就是有弹性,能够根据屏幕/当前空间大小自由伸缩的.使用弹性布局可以很好的适应各种尺寸的客户端. 关键代码 display:flex; 设定元素为弹性布局 <文档传送门 ...

  2. html/css弹性布局的几大常用属性详解

    弹性布局的名称概念: 1.容器:需要添加弹性布局的父元素:项目:弹性布局容器中的每一个子元素,称为项目. 2.主轴:在弹性布局中,我们会通过属性规定水平/垂直方向(flex-direction)为主轴 ...

  3. 潜入FLEXBOX——CSS弹性布局

    介绍 Flexbox是CSS3中的一种新的布局模式,旨在满足现代Web的更复杂的需求.本文将详细介绍新近稳定化的Flexbox语法.浏览器支持将迅速增长,因此,当支持范围足够使Flexbox实用时,您 ...

  4. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  5. 简单探讨弹性布局flex

    css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...

  6. CSS中的EM属性之弹性布局

    这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...

  7. CSS经典布局之弹性布局

    当我们在浏览浏览器的时候,经常会放大/缩小浏览器的显示比例,或者在不同的设备上.所处的分辨率也不尽同样. 因此.我们须要学习一个新的知识:弹性盒模型. 弹性盒模型 实现项目对齐,方向,排序(即使项目大 ...

  8. css进阶之二:flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  9. 百度在PWA中阐述的弹性布局-[CSS]

    原文链接 响应式布局 自从进入移动互联网时代,响应式布局这个词经常出现在 Web 设计和开发领域,它让 Web 页面在不同尺寸的设备上都具有良好的浏览体验. 开始之前 在讲解响应式布局之前,需要先了解 ...

随机推荐

  1. uC/OS-II队列(OS_q)块

    /*************************************************************************************************** ...

  2. 服务器配置ssl证书支持苹果ATS方法

    服务器配置ssl证书支持苹果ATS方法 发布日期:2016-12-14 苹果安全工程&架构部门主管Ivan Kristic表示ATS将在今年底成为App Sotre app的必要条件,这将大幅 ...

  3. MSDeploy 同步时不删除原有文件

    在 jenkins里  Execute Windows batch command "C:\Program Files (x86)\IIS\Microsoft Web Deploy V3\m ...

  4. 自然语言20.1 WordNet介绍和使用 _

    http://blog.csdn.net/ictextr9/article/details/4008703 Wordnet是一个词典.每个词语(word)可能有多个不同的语义,对应不同的sense.而 ...

  5. 内嵌DB

    SQLLite H2 MySQL Embeded 等 比较项目 SQLite H2 database engine MySQL Embedded Footprint 350KiB ~1MB <2 ...

  6. 浏览器本地存储(browser-storage,HTML5-localStorage > IE-UserData > Cookie)

    https://www.baidufe.com/component/browser-storage/index.html BrowserStorage是浏览器本地存储的一个解决方案,存储优先级依次为: ...

  7. C#--几个数据流Stream;StreamReader;StreamWriter;MemoryStream;BufferStream;

    命名空间:System.IO; Stream: 各种流的基类,不能时行查找操作,Position属性不能修改.读取时不Position不会自动移动, HttpWebRequest webreq = ( ...

  8. HTML5 Audio and Video 的新属性简介

    前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...

  9. Auto generating Entity classes with xsd.exe for XML Serialization and De-Serialization

    More info here: http://blogs.msdn.com/b/yojoshi/archive/2011/05/14/xml-serialization-and-deserializa ...

  10. MongoVUE

    MongoVUE运行界面如下: