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. Yocto开发笔记之《根文件系统裁剪》(QQ交流群:519230208)

    开了一个交流群,欢迎爱好者和开发者一起交流,转载请注明出处. QQ群:519230208,为避免广告骚扰,申请时请注明 “开发者” 字样 =============================== ...

  2. 利用百度开发者中心的api实现地图及周边的搜索

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. eclipse安装springsource-tool-suite

    到http://spring.io/tools/sts/all找到安装的eclipse对应的springsource-tool-suite版本,复制下载的网址 然后在eclipse的install n ...

  4. URL组分

    url通常包含多个组成部分,在js中可通过location对象获取其中各项信息 访问http://mp.weixin.qq.com/s?__biz=MjM5NjA0NjgyMA==&mid=2 ...

  5. Numerical Optimization: Understanding L-BFGS

    http://aria42.com/blog/2014/12/understanding-lbfgs/ Numerical optimization is at the core of much of ...

  6. C++ 内存管理与堆栈

    /*内存管理与堆栈: * # 一个由C/C++编译的程序占用的内存分为以下几个部分 * 1.栈区:由编译器自动分配释放,数据先进后出 * 2.堆区:由程序员手动分配释放,数据先进先出, * new 和 ...

  7. PHP页面跳转

    PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header( ...

  8. awk操作数组注意几点

    awk的数组跟其他程序设计语言的数组有所不同:1.可以直接在awk中定义数组:2.数组元素的初始值为0或空字符串,除非他们被显示的指定初始化:3.数组可以自动扩展:4.都是关联数组,数字下标也会转成字 ...

  9. Linux的io机制

    Linux的io机制 Buffered-IO 和Direct-IO Linux磁盘I/O分为Buffered IO和Direct IO,这两者有何区别呢? 对于Buffered IO: 当应用程序尝试 ...

  10. composer错误收集

    1. Problem 1 - The requested package ** is satisfiable by ** but these conflict with your requiremen ...