欲生

导航

 

2017年7月9日

摘要: flex-direction flex-direction 顺序指定了弹性子元素在父容器中的位置。 语法 flex-direction的值有: row:横向从左到右排列(左对齐),默认的排列方式。 row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。 column:纵向排列 阅读全文
posted @ 2017-07-09 13:41 欲生 阅读(132) 评论(0) 推荐(0)
 
摘要: 我们可以修改排列方式。 如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变,页面布局也跟着改变: 实例 body { direction: rtl; } .flex-container { display: -webkit-flex; di 阅读全文
posted @ 2017-07-09 13:40 欲生 阅读(160) 评论(0) 推荐(0)
 
摘要: 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹 阅读全文
posted @ 2017-07-09 13:39 欲生 阅读(350) 评论(0) 推荐(0)
 
摘要: 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 阅读全文
posted @ 2017-07-09 13:38 欲生 阅读(99) 评论(0) 推荐(0)