http://zhidian.wuute.com/html5dev/ 2026-05-20T19:09:40+09:00 http://zhidian.wuute.com/html5dev/ http://zhidian.wuute.com/html5dev/lib/tpl/bootstrap3_1/images/favicon.ico text/html 2017-04-23T00:29:06+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/aligncontent?rev=1492874946&do=diff align-content align-content属性规定弹性内容的侧轴方向上右额外的空间时，如何排布每一行。当弹性容器只有一行时无作用。 语法 align-content: flex-start | flex-end | center | space-between | space-around | stretch text/html 2017-04-23T00:29:45+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/alignitems?rev=1492874985&do=diff align-items align-items 属性以与 justify-content 相同的方式在侧轴方向上将当前行上的弹性元素对齐。 语法 align-items: flex-start | flex-end | center | baseline | stretch 值 值描述flex-star规定元素向侧轴起点对齐。flex-end text/html 2017-04-24T15:02:59+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/alignself?rev=1493013779&do=diff align-self align-self 会对齐当前 flex 行中的 flex 元素，并覆盖align-items。 语法 align-self: auto | flex-start | flex-end | center | baseline | stretch 值 值描述auto将计算为其父元素的align-items值，或者为stretch如果没有父元素的话。 text/html 2017-04-23T00:31:44+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/flex?rev=1492875104&do=diff flex flex 是一个简写属性，它具有规定一个可伸缩项目的能力。flex 元素可以根据 flex-grow 因子拉伸以填充可用空间，或根据 flex-shrink 因子收缩以防止溢出。 语法 flex:none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] text/html 2017-04-23T00:34:43+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/flexbasis?rev=1492875283&do=diff flex-basis flex-basis 规定 flex item 在主轴方向上的初始大小。如果不使用box-sizing来改变盒模型的话，那么这个属性就决定了flex item的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。 text/html 2017-04-23T00:37:24+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/flexdirection?rev=1492875444&do=diff flex-direction flex-direction 规定内部元素是如何在flex容器中布局的，定义了主轴的方向。（是正向的或是相反的）。 语法 flex-direction:row | row-reverse | column | column-reverse 值 值描述rowflex 容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。横向从左到右排列（左对齐），默认的排列方式。 text/html 2017-04-23T00:38:04+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/flexflow?rev=1492875484&do=diff flex-flow flex-flow是一个简写属性，它由 flex-direction (伸缩方向) 和 flex-wrap (是否强制换行)组成。 语法 flex-flow: <'flex-direction'> | <'flex-wrap'> 值 值描述<'flex-direction'>更多信息请查看 flex-direction 。<'flex-wrap'>更多信息请查看 flex-wrap 。 text/html 2017-04-23T00:38:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/flexgrow?rev=1492875512&do=diff flex-grow flex-grow 属性规定弹性盒子项（flex item）的拉伸比率。 语法 flex-grow: <number> 值 值描述<number>用数值来定义扩展比率。负值无效。 例子 HTML <ul id="box" class="box"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> </ul> text/html 2017-04-23T00:38:57+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/flexshrink?rev=1492875537&do=diff flex-shrink flex-shrink 属性规定 flex 元素的收缩规则（弹性盒的收缩比率）。 语法 flex-shrink: <number> 值 值描述<number>默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。 text/html 2017-04-23T00:39:26+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/flexwrap?rev=1492875566&do=diff flex-wrap flex-wrap 规定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。 语法 flex-wrap: nowrap | wrap | wrap-reverse 值 值描述nowrapflex 的元素被摆放到到一行，这可能导致溢出 text/html 2017-04-23T00:39:50+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/justifycontent?rev=1492875590&do=diff justify-content justify-content 属性规定浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。 语法 justify-content: flex-start | flex-end | center | space-between | space-around 值 值描述flex-start从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。 text/html 2017-04-23T00:40:53+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/order?rev=1492875653&do=diff order order 规定弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。 语法 order: <integer> text/html 2017-04-23T20:39:16+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/40/start?rev=1492947556&do=diff 弹性盒 定义 弹性盒（Flexible Box，简称Flexbox）属性是一些与弹性盒子布局相关的CSS属性。 概述 弹性盒布局是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加灵活的方式来对一个容器中的条目进行排列、对齐和分配空白空间。