css弹性布局
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弹性布局的更多相关文章
- [前端随笔][css] 弹性布局
说在前面 弹性布局,顾名思义就是有弹性,能够根据屏幕/当前空间大小自由伸缩的.使用弹性布局可以很好的适应各种尺寸的客户端. 关键代码 display:flex; 设定元素为弹性布局 <文档传送门 ...
- html/css弹性布局的几大常用属性详解
弹性布局的名称概念: 1.容器:需要添加弹性布局的父元素:项目:弹性布局容器中的每一个子元素,称为项目. 2.主轴:在弹性布局中,我们会通过属性规定水平/垂直方向(flex-direction)为主轴 ...
- 潜入FLEXBOX——CSS弹性布局
介绍 Flexbox是CSS3中的一种新的布局模式,旨在满足现代Web的更复杂的需求.本文将详细介绍新近稳定化的Flexbox语法.浏览器支持将迅速增长,因此,当支持范围足够使Flexbox实用时,您 ...
- CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
- 简单探讨弹性布局flex
css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...
- CSS中的EM属性之弹性布局
这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...
- CSS经典布局之弹性布局
当我们在浏览浏览器的时候,经常会放大/缩小浏览器的显示比例,或者在不同的设备上.所处的分辨率也不尽同样. 因此.我们须要学习一个新的知识:弹性盒模型. 弹性盒模型 实现项目对齐,方向,排序(即使项目大 ...
- css进阶之二:flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- 百度在PWA中阐述的弹性布局-[CSS]
原文链接 响应式布局 自从进入移动互联网时代,响应式布局这个词经常出现在 Web 设计和开发领域,它让 Web 页面在不同尺寸的设备上都具有良好的浏览体验. 开始之前 在讲解响应式布局之前,需要先了解 ...
随机推荐
- uC/OS-II队列(OS_q)块
/*************************************************************************************************** ...
- 服务器配置ssl证书支持苹果ATS方法
服务器配置ssl证书支持苹果ATS方法 发布日期:2016-12-14 苹果安全工程&架构部门主管Ivan Kristic表示ATS将在今年底成为App Sotre app的必要条件,这将大幅 ...
- MSDeploy 同步时不删除原有文件
在 jenkins里 Execute Windows batch command "C:\Program Files (x86)\IIS\Microsoft Web Deploy V3\m ...
- 自然语言20.1 WordNet介绍和使用 _
http://blog.csdn.net/ictextr9/article/details/4008703 Wordnet是一个词典.每个词语(word)可能有多个不同的语义,对应不同的sense.而 ...
- 内嵌DB
SQLLite H2 MySQL Embeded 等 比较项目 SQLite H2 database engine MySQL Embedded Footprint 350KiB ~1MB <2 ...
- 浏览器本地存储(browser-storage,HTML5-localStorage > IE-UserData > Cookie)
https://www.baidufe.com/component/browser-storage/index.html BrowserStorage是浏览器本地存储的一个解决方案,存储优先级依次为: ...
- C#--几个数据流Stream;StreamReader;StreamWriter;MemoryStream;BufferStream;
命名空间:System.IO; Stream: 各种流的基类,不能时行查找操作,Position属性不能修改.读取时不Position不会自动移动, HttpWebRequest webreq = ( ...
- HTML5 Audio and Video 的新属性简介
前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...
- 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 ...
- MongoVUE
MongoVUE运行界面如下: