零基础建站培训介绍

当前位置:

CSS3弹性盒布局详解:box-flex /box-oridial-group/box-orient

弹性盒布局模型(Flexible Box Layout)是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。

这种布局方式在条目尺寸未知或动态时也能工作。这种布局方式已经被主流浏览器所支持,可以在 Web 应用开发中使用。9

使用弹性盒布局时,父元素必须设置display:box;

CSS3弹性盒布局可以制作自适用窗口。

box-flex属性

使用整个网页的宽度随着浏览器窗口的大小而变化。


#p1
{
<span style="color: #ff0000;">-moz-box-flex:1.0; /* Firefox */</span>
<span style="color: #ff0000;">-webkit-box-flex:1.0; /* Safari 和 Chrome */</span>
<span style="color: #ff0000;">box-flex:1.0;</span>
border:1px solid red;
}

box-oridial-group属性:规定框中子元素的显示次序:
设置box-ordinal-group的值,将原排列方式改变成按


.box
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari 和 Chrome */
display:box;
border:1px solid black;
}
.ord1
{
margin:5px;
-moz-box-ordinal-group:1; /* Firefox */
-webkit-box-ordinal-group:<span style="color: #ff0000;">1</span>; /* Safari 和 Chrome */
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-moz-box-ordinal-group:2; /* Firefox */
-webkit-box-ordinal-group:<span style="color: #ff0000;">2</span>; /* Safari 和 Chrome */
box-ordinal-group:2;
}

box-orient属性:改变布局的排列方向
5

语法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
描述 测试
horizontal 在水平行中从左向右排列子元素。 测试
vertical 从上向下垂直排列子元素。 测试
inline-axis 沿着行内轴来排列子元素(映射为 horizontal)。 测试
block-axis 沿着块轴来排列子元素(映射为 vertical)。 测试
inherit 应该从父元素继承 box-orient 属性的值。
上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 新增背景属性background-clipbackground-originbackground-sizeCSS常用背景属性background-repeatbackground-image边框样式border
  • 在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求。虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧。今
  • *{margin: 0; padding: 0}的作用*{margin: 0; padding: 0}作用是Reset(重置)浏览器默认样式,对于各浏览器样式统一的话有着简单粗暴的效果。* 这
  • 背景样式在制作网站过程中经常使用到。以下是CSS background 背景样式经常使用到的几种样式:背景属性以及背景位置的控制:1、background-position
  • 有时候,我们需要对网页某个区域的文字竖排,竖向排列。横向排列,在网站制作培训中,经常用到。对于竖排,一时间找不到思路了,呵呵,其实和横排一样
  • 代码介绍:一款CSS3设计的绿色扁平化简洁清爽风格鼠标悬停动画切换网站导航菜单代码特效。代码适用:适用浏览器:360、FireFox、Chrome、Safari、
  • display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、
  • CSS相对定位:position:relative;指在其正常的位置上偏移;relative,使用相对定位时,移动后,它原来占的位置不会被其它元素占用。CSS从不定位:pos
  • CSS3常用属性手册 (144443 次学习)
    CSS3新增选择器有哪些:https://www.xuewangzhan.net/baike/css3-232.html  CSS3中的transform 变形功能:transform:rotate():旋转  t
  • 相对定位(relative)是指在其正常的位置上偏移;使用相对定位时,移动后,它原来占的位置不会被其它元素占用。相对定位的语法:div{position:re