首頁 > web前端 > html教學 > HTML前端开发之路--弹性盒模型_html/css_WEB-ITnose

HTML前端开发之路--弹性盒模型_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:26:58
原創
1027 人瀏覽過

弹性盒模型(Flexible Box)是一个CSS3新增布局模块,用于实现容器里项目的对齐、方向、排序;

弹性盒模型最大的特效在于,能够动态的修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局;

下面是弹性盒模型的元素基本概念:

弹性盒模型的属性总览:

  1. flex-direction属性简介

    例如:

  2. flex-wrap属性简介

  3. flex-flow属性简介

    flex-flow属性是flex-direction和flex-wrap两个属性的复合属性;

    flex-flow:[flex-direction] || [flex-wrap];

  4. justify-content属性简介

    值得一提的是space-around属性,

    space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍;

    例如:

  5. align-items属性简介

    例如:

  6. align-content属性简介


接下来介绍弹性子元素性质:

  1. order属性简介

    order属性定义项目的排列顺序,数值越小排列越靠前,取值可以为负值,默认值为0;

  2. flex-grow属性简介

    flex-grow属性用于定义项目的放大比例,默认为0,不允许负值,即如果存在剩余空间也不放大;

  3. flex-shrink属性简介

    flex-shrink属性用于定义项目的缩小比例,默认为1,不允许为负值;

  4. flex-basis属性简介

    flex-basis属性用于定义项目的伸缩基准值,取值可以为自定义值或者auto

  5. flex属性简介

    flex是flex-grow、flex-shrink和flex-basis的复合属性值;

  6. align-self属性简介

  7. align-self属性用于单独设置项目在侧轴的对齐方式,可以覆盖align-items的属性,默认值为auto,即继承父元素的align-items的值

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板