未加星标

[知识总结]HTML5布局之flex布局总结

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏
一 布局几种方式

1.静态(自然)布局(没有任何(float,position等)修饰的布局)

2.浮动布局(float)

3.定位布局(position)

4.弹性布局(flex)

5.栅格布局(就是把网页的宽度分成固定的相同宽度,然后列出各种可能的组合,以便页面在进行呈现时能够进行快速的布局,通常12等分或24等分)

弹性布局

概念:是CSS3的弹性盒子(Flexible Box)或FlexBox,是一种布局方式,当页面需要适应不同屏幕大小或设备类型时,他会确保拥有恰当的布局方式.

原理 弹性布局是通过调整其内元素的宽高,从而在任何显示设备对可用的显示空间的最佳填充能力. 名称解释 轴(Axis)

每个弹性框布局都包含两个轴,弹性项目(子级元素)延其依次排列的的水平轴称之为主轴(水平线),

垂直于主轴的称之为侧重(垂直线)

尺寸(Dimension) 根据弹性容器的主轴侧轴,弹性项目的宽高,对应的主轴的称之为主轴尺寸(宽),对应侧轴的称之为侧轴尺寸(高) 定义一个弹性布局

display:flex;

值flex使弹性容器成为一个块级元素,定义在父级上

display:inline-flex;

值inline-flex使弹性容器成为行内元素.定义在父级上.

display:none;

注意:使用弹性布局后,子元素的float,clear和vertical-align将失效.

flex属性分类 1.容器属性(作用于父级上) a.flex-direction

这个属性决定了主轴(水平)的方向(项目的排列方向)

b.flex-wrap

默认情况下,项目排在一行,可以通过这个属性设置来决定子级元素是否换行显示

c.flex-flow

该属性是flex-direction和flex-wrap属性的简写

d.justity-content

定义了项目(子级)在主轴(水平)方向上的对齐方式

e.align-items

定义了项目(子级元素)在交叉轴上的对齐方式

f.align-content

定义了多根轴的对齐方式,如果只有一根轴线该属性不起作用

2.项目(子级)属性(属性写在子级元素上) a.order

定义了项目(子级)的排列顺序,数值越小排列越前,值可正可负

b.flex-grow

定义了项目(子级元素)的放大比例,默认是0,如果空间不够,该项目不放大

c.flex-shrink

定义了项目的缩小比例,默认1,如果空间不够,该项目自动缩小.

d.flex-basis

该属性会计算主轴是否有多余空间

e.flex

是flex-grow,flex-shrink和flex-basis的简写,也就是他们的复合写法

f.align-self

该属性允许单个项目有与其他项目不一样的对齐方式,默认值auto,表示父级元素的align-items属性,没如果没有父级,则等同于stretch

具体演示

一 容器属性flex-direction属性演示

HTML代码 <pre> flex-direction属性 flex-direction属性决定主轴的方向(即项目的排列方向)。 .box { flex-direction: row | row-reverse | column | column-reverse; } row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。 </pre> <h1>flex-direction: row</h1> <ul id="box1" class="box1"> <li>A</li> <li>B</li> <li>C</li> </ul> <h1>flex-direction: row-reverse</h1> <ul id="box2" class="box1"> <li>A</li> <li>B</li> <li>C</li> </ul> <h1>flex-direction: column</h1> <ul id="box3" class="box1"> <li>A</li> <li>B</li> <li>C</li> </ul> <h1>flex-direction: column-reverse</h1> <ul id="box4" class="box1"> <li>A</li> <li>B</li> <li>C</li> </ul> CSS样式

.box1{ display: flex; } .box1 li{ width: 100px; height: 100px; border: 2px solid red; text-align: center; list-style: none; } #box1{ flex-direction: row; } #box2{ flex-direction: row-reverse; } #box3{ flex-direction: column; } #box4{ flex-direction: column-reverse; } 未完待续……

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTMLHTML5CSSCSS3会计定位
分页:12
转载请注明
本文标题:[知识总结]HTML5布局之flex布局总结
本站链接:http://www.codesec.net/view/482738.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(32)