请登录查看
CSS3 box-direction 属性
由右至左，显示一个div box的子元素：
div{width:350height:100border:1
/* Internet Explorer 10 */display:-ms-
-ms-flex-direction:row-/* Firefox */display:-moz-
-moz-box-direction:/* Safari, Opera, and Chrome */
display:-webkit--webkit-box-direction:/* W3C */
display:box-direction:
浏览器支持
目前主流浏览器不支持 box-direction 属性。
Internet Explorer 10通过私有属性 the -ms-flex-direction 支持.
Firefox通过私有属性- MOZ-box-direction支持。
Safari和Chrome通过私有属性-WebKit-box-direction属性。
注意： Internet Explorer 9及更早IE版本不支持弹性框.
属性定义及使用说明
box-direction属性指定显示哪个方向的box的子元素。
JavaScript 语法：
object.style.boxDirection="reverse"
box-direction: normal|reverse|
以默认方向显示子元素。
以反方向显示子元素。
应该从子元素继承 box-direction 属性的值
意见反馈：
联系方式：
广告等垃圾信息
不友善内容
违反法律法规的内容
不宜公开讨论的政治内容css display:box 新属性_CSS_何问起
您的位置： -
css display:box 新属性
一、display:
　　在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-。
二、可在其子代设置如下属性
　　前提：使用如下属性，必须在父代设置display:
　　1.box-flex:
　　　　1）占父级元素宽度的number份
　　　　2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按　number占份数
　　　　3）若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份
　　2.box-orient:horizontal/vertical
　　　　在父级上设置该属性，则子代按水平排列或竖直排列。
　　　　注：所有主流浏览器不支持该属性，必须加上前缀。
　　　　1）horizontal &水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
　　　　2）vertical &垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。
　　3.box-direction:normal/reverse
　　　　在父级上设置该属性，确认子代的排列顺序。
　　　　1）normal &默认值，子代按html顺序排列
　　　　2）reverse &反序
　　4.box-align:start/end/center/stretch
　　　　在父级设置，子代的垂直对齐方式。
　　　　1）start &垂直顶部对齐
　　　　2）end 垂直底部对齐
　　　　3）center 垂直居中对齐
　　　　4）stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。
　　5.box-pack:start/end/center
　　　　在父级设置，子代的水平对齐方式。
　　　　1）start &水平左对齐
　　　　2）end &水平右对齐
　　　　3）center &水平居中对齐CSS3弹性盒模型之Flexbox是布局模块box-sizing & box-orient & box-direction & box-ordinal-group
时间： 19:07:35
&&&& 阅读：48
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。
content-box，border和padding不计算入width之内
padding-box，border-box，border和padding计算入width之内
ie8+浏览器支持content-box和border-box；
ff则支持全部三个值。
-webkit-box-sizing: 100 // &ios-safari, android
-moz-box-sizing:100 // ff
box-sizing:100 //other
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&box-sizing&/title&
.content-box{
box-sizing:content-
-moz-box-sizing:content-
width: 100
height: 100
padding: 20
border: 5px solid #E6A43F;
background:
.padding-box{
box-sizing:padding-
-moz-box-sizing:padding-
width: 100
height: 100
padding: 20
border: 5px solid #186645;
background:
.border-box{
box-sizing:border-
-moz-box-sizing:border-
width: 100
height: 100
padding: 20
border: 5px solid #3DA3EF;
background:
&div class="content-box"&content-box&/div&
&div class="padding-box"&padding-box&/div&
&div class="border-box"&border-box&/div&
1、box-origent:&水平或垂直分布。
box-origent有两个值：horizional（水平）和vertical（垂直），意思就是元素的排列方式！
css代码如下：
body {display: -webkit-
-webkit-box-orient:&horizional;
水平排列方式如下：
body {display: -webkit-
-webkit-box-orient:&vertical;
垂直排列方式如下：
2、box-direction：反向分布
box-direction也有两个值 normal(正常)和reverse（反向），当然如果使用的时候当然一般都是为了reverse的！该属性的作用就是把本来 由1-2-3排列的元素倒过来变成：3-2-1
注意：无论是box-orient还是box-direction都需是在父元素中定义而决定子元素的排列的，而且他们起作用的前提是display:box&必须将display的值设置成box,否则是不会生效的，还有不同浏览器必须加上前缀（-webkit-、-moz-、-o-、-ms- 等等）。
3、除了box-direction能够实现反向分布外，还有一个更具体的公布方法，是定义在每个子元素的属性，它甚至可以决定任何的排列顺序，1-3-2，3-1-2...都可以，那就是&box-ordinal-group&,
它的值是从1开始的正整数，值越小便排得超前面！
css代码如下：
.box1{-webkit-box-ordinal-group:1}
.box2{-webkit-box-ordinal-group:3}
.box3{-webkit-box-ordinal-group:2}
Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。
Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。
flexbox布局首先需要创建一个flex容器。为此给元素设置display属性的值为flex。对于IE10来说，我们需要在开头的地方添加-ms-flexbox。
.container{
display:-webkit-
display:-moz-
display:-ms-
box-orient定义分布的坐标轴：vertical和horizional。这两个值分别定义盒子垂直显示和水平显示：
.container{
box-orient:
box-orient:&horizontal|vertical|inline-axis|block-axis|
| 值 | 描述 |&| ------------- |:-------------:|&| inline-axis（轴线） | 沿着行内轴来排列子元素（即从左往右）。&| block-axis | 沿着块轴来排列子元素（即从上往下）。
&!DOCTYPE html&
因为body元素包含了想要居中的标题元素，所以我们将他的display属性值设置为“flex”：
主要作用是让元素body使用flexbox布局，而不是普通的块布局。在文档流中的所有子元素（即不是绝对定位的元素）现在都变成了伸缩项目。
display: -webkit-
display:-moz-
box-orient:
box-direction:
background:
height: 100
background:
height: 100
background:
height: 100
还可以指定在解析了任何灵活长度和自动页边距之后，弹性容器的内容与主轴和横轴（与主轴垂直）的对齐方式。你可以通过justify-content、align-items、align-self&和&align-content&属性调整此对齐方式。
使用&justify-content&属性，可以设置在解析了任何灵活长度和自动页边距之后，弹性项目与弹性容器主轴的对齐方式。下图显示了&justify-content&的值以及这些值对弹性容器（含三个弹性项目）的影响。
justify-content：flex-start(默认值) 伸缩项目向一行的起始位置靠齐。
justify-content：flex-end 伸缩项目向一行的结束位置靠齐。
justify-content：center 伸缩项目向一行的中间位置靠齐。
justify-content：space-between 伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。
justify-content：space-around 伸缩项目会平均地分布在行里，两端保留一半的空间。
align-items 侧轴对齐（适用于伸缩容器，也就是伸缩项目的父元素）
align-items&是一个和&justify-content&相呼应的属性。align-items&调整伸缩项目在侧轴上的定位方式。可能的值有：
flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
center：伸缩项目的外边距盒在该行的侧轴上居中放置。
baseline：伸缩项目根据他们的基线对齐。
stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。
flex-wrap 伸缩行换行
目前为止，每个伸缩容器都有且只有一个伸缩行。使用 flex-wrap 你可以为伸缩容器创建多个伸缩行。这个属性接受以下值：
nowrap (默认)
wrap-reverse
如果 flex-wrap 设置为 wrap，在一个伸缩行容不下所有伸缩项目时，伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。
align-content 堆栈伸缩行
align-content&会更改&flex-wrap&的行为。它和&align-items&相似，但是不是对齐伸缩项目，它对齐的是伸缩行。可能你已经想到了，它接受的值也很相似：
flex-start：各行向伸缩容器的起点位置堆叠。
flex-end：各行向伸缩容器的结束位置堆叠。
center：各行向伸缩容器的中间位置堆叠。
space-between：各行在伸缩容器中平均分布。
space-around：各行在伸缩容器中平均分布，在两边各有一半的空间。
stretch（默认值）：各行将会伸展以占用剩余的空间。
align-self 侧轴对齐
伸缩项目的&align-self&属性会覆盖该项目的伸缩容器的&align-items&属性。它的值和&align-items&一样：
stretch (默认)
flex-start
box-direction&属性规定框元素的子元素以什么方向来排列。
box-direction: normal|reverse|
box-pack&属性规定当框大于子元素的尺寸，在何处放置子元素。语法
box-pack: start|end|center|
start ：所有子容器都分布在父容器的左侧，右侧留空
end ：所有子容器都分布在父容器的右侧，左侧留空
justify ：所有子容器平均分布（默认值）
center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）
box-align&属性规定如何对齐框的子元素。语法
box-align: start|end|center|baseline|
start ：子容器从父容器顶部开始排列
end ：子容器从父容器底部开始排列
center ：子容器横向居中（有点奇怪）
baseline ：所有子容器沿同一基线排列（很难理解）
stretch ：所有子容器和父容器保持同一高度（默认值）
box-flex&属性规定框的子元素是否可伸缩其尺寸。语法
看下面一个实例：
与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。
flex: initial
一个&flex&属性值被设为&initial&的伸缩项目，在有剩余空间的情况下不会有任何变化，但是在必要的情况下会被收缩。
flex: auto
一个 flex 属性值被设为&auto&的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间。
auto&目前仅在 Opera 12.11 尚有效，在 Chrome 23.0.1271.95 上无效。你可以通过使用 flex: 1; 来达到一样的效果。
flex: none
一个&flex&属性值被设为&none&的伸缩项目，在任何情况都不会发生伸缩。
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：/qingqingzou-143/p/6126626.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！详解CSS中的Box Model盒属性的使用
页面上显示的每个元素（包括内联元素）都可以看作一个盒子，即盒模型( box model )。请看 Chrome DevTools 里的截图：
可以显而易见的看出盒模型由 4 部分组成。从内到外分别是：
content -& padding -& border -& margin按理来说一个元素的宽度（高度以此类推）应该这样计算：
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right但是不同浏览器（你没有猜错，就是那个与众不同的浏览器）对宽度的诠释不一样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度，其余都要额外算。于是你规定一个元素：
CSS Code复制内容到剪贴板
.example&{ &&
&&&&width:&200px; &&
&&&&padding:&10px; &&
&&&&border:&5px&solid� &&
&&&&margin:&20px; &&
则他最终的宽度应为：
&宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) =& 270而在 IE（低于IE9） 下，最终宽度为：
宽度 = width(200px) + margin(20px * 2) = 240我个人觉得 IE 的更符合人类思维，毕竟 padding 叫内边距，边框算作额外的宽度也说不下去。W3C 最后为了解决这个问题，在 CSS3 中加了 box-sizing 这个属性。当我们设置 box-sizing: border-& 时，border 和 padding 就被包含在了宽高之内，和 IE 之前的标准是一样的。所以，为了避免你同一份 css 在不同浏览器下表现不同，最好加上：
CSS Code复制内容到剪贴板
*,&*:before,&*:after&{ &&
&&-moz-box-sizing:&border- &&
&&-webkit-box-sizing:&border- &&
&&box-sizing:&border- &&
这里还有两种特殊情况：
无宽度 && 绝对定位（position:） 元素无宽度 && 浮动（float） 元素它们在页面上的表现均不占据空间（脱离普通流，感觉像浮在页面上层一样，移动它们不影响其他元素的定位）。
CSS3 Flexible Box Model
相关属值：
box-orient　确定子元素的方向box-flex　　按比例分配父标签的宽度或高度空间。且值至少为1时起作用。当子元素中有宽度值的时候，此元素就定宽处理，剩下的空间再按比例分配。box-direction 用来确定子元素的排列顺序box-align 决定了垂直方向空间使用，也就是垂直方向上的对齐表现。box-pack 决定了父标签水平空间的使用
box-align: start|end|center|baseline|box-direction: normal|reverse|box-flex:box-flex-group:box-lines: single|box-ordinal-group:box-orient: horizontal(水平) | vertical(垂直) | inline-axis | block-axis | inheritbox-pack: start|end|center|justify(两端对齐);box-sizing: content-box|border-box|inherit:box-shadow: h-shadow v-shadow blu
使用灵活的盒模型容器内平均分配子元素很容易：
CSS Code复制内容到剪贴板
.container&{ &&
display:& &&
box-align:& &&
box-orient:& &&
.container&span{box-flex:1;}&&
外层必须具有宽度。内层必须具有BFC。
顶一下(0) 踩一下(0)
热门标签：