9159金沙游艺场

9159金沙游艺场 11
——–驱动开发之 ObReferenceObjectByName() 故障排查——–
图片 3
C# 设置Excel超链接（二）

我对Flexbox布局模式的理解

Flex 布局教程：语法篇：

box-align属性

box-align 属性用来处理伸缩容器的额外空间。

此属性的属性值有：

  •      start  ： 伸缩项目以顶部为基准，清理下部额外空间
  •      end    ： 伸缩项目以底部为基准，清理上部额外空间
  •    center ： 伸缩项目以中部为基准，平均清理上下部额外空间
  • baseline ： 伸缩项目以基线为基准，清理额外的空间
  • stretch  ： 伸缩项目填充整个容器，默认值

同样的，我们将试一下每个属性值的效果：

1.start属性值

CSS

div{ display:-webkit-box; display:box; -webkit-box-align:start;
box-align:start; }

1
2
3
4
5
6
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:start;
    box-align:start;
}

效果如下：

图片 1

2.end属性值

CSS

div{ display:-webkit-box; display:box; -webkit-box-align: end ;
box-align: end ; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
end ;
    box-align:
end ;
}

效果如下：

图片 2

3.center属性值

CSS

div{ display:-webkit-box; display:box; -webkit-box-align: center ;
box-align: center ; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
center ;
    box-align:
center ;
}

效果如下：

图片 3

4.baseline属性值

如果box-orient是内嵌单轴或横向，所有的子元素都置于他们的基线对齐。

CSS

div{ display:-webkit-box; display:box; -webkit-box-orient:horizontal;
box-orient:horizontal; -webkit-box-align:baseline; box-align:baseline; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    -webkit-box-align:baseline;
    box-align:baseline;
}

效果如下：

图片 4

而如果box-orient是块轴或者垂直方向的，那么所有的子元素都将居中垂直排列。

CSS

div{ display:-webkit-box; display:box; -webkit-box-orient: vertical ;
box-orient:vertical; -webkit-box-align:baseline; box-align:baseline; }

1
2
3
4
5
6
7
8
9
div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:
vertical ;
    box-orient:vertical;
    -webkit-box-align:baseline;
    box-align:baseline;
}

效果如下：

图片 5

5.stretch属性值

所有子元素拉伸以填充包含区块。

CSS

div{ display:-webkit-box; display:box; -webkit-box-align: stretch ;
box-align: stretch ; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
stretch ;
    box-align:
stretch ;
}

效果如下：

图片 6

box-flex属性

box-flex
属性可以使用浮点数分配伸缩项目的比例。此属性是给容器内的项目设置的，它们会基于父容器的宽度来分配它们所占的比例：

CSS

p:nth-child(1){ -webkit-box-flex:1; box-flex:1; } p:nth-child(2){
-webkit-box-flex:3; box-flex:3; } p:nth-child(3){ -webkit-box-flex:1;
box-flex:1; }

1
2
3
4
5
6
7
8
9
10
11
12
p:nth-child(1){
    -webkit-box-flex:1;
    box-flex:1;
}
p:nth-child(2){
    -webkit-box-flex:3;
    box-flex:3;
}
p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

效果如下：

图片 7

当然也可以有些项目是固定宽度的，那么其他的项目也会分配剩余的宽度，比如这里第一个p元素设置为固定宽度：

CSS

p:nth-child(2){ -webkit-box-flex:2; box-flex:2; } p:nth-child(3){
-webkit-box-flex:1; box-flex:1; }

1
2
3
4
5
6
7
8
p:nth-child(2){
    -webkit-box-flex:2;
    box-flex:2;
}
p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

效果如下：

图片 7

更多使用情况，大家可以自己慢慢去尝试。

关于作者：Tw93

图片 9

简介还没来得及写 :）
个人主页 ·
我的文章 ·
5 ·
 

图片 10

flex-flow属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的速记属性。

CSS

div{ display:flex; flex-flow:row wrap; }

1
2
3
4
div{
    display:flex;
    flex-flow:row wrap;
}

上面这个例子就相当于设置了flex-direction为row，flex-wrap为wrap。效果就是这样的：

图片 11

旧版本（box）

首先看一下浏览器兼容情况：

图片 12

 

PS：浏览器兼容数据不一定很准确，不过相差不大。

下面将通过一个简单的实例来讲解旧版本的各个属性：

html代码：

<div>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

1
2
3
4
5
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

可以看到我们这个例子是很简单的，一个div元素内包含三个p元素，它们都是块元素（block）。接下来给段落加一些基础的样式：

CSS

p{ width:150px; border:3px solid lightblue; background:lightgreen;
padding:5px; margin:5px; }

1
2
3
4
5
6
7
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

此时刷新网页看到的结果是这样的：

图片 13

这个结果很正常吧！OK，现在我们给div元素设置为box,看看有什么变化：

CSS

div{ display:-webkit-box; display:box; }

1
2
3
4
div{
    display:-webkit-box;
    display:box;
}

我们再次刷新网页，结果是这样的：

图片 14

看到了吧，现在每一个p元素都变成一个box了，这就是弹性布局的神奇所在！

在上面中，我们将div元素的display设置为box，这就是旧版本的弹性布局。对于比较旧的浏览器版本，我们需要加上-webkit-前缀。

旧版本的弹性布局有两个属性值：

  •  box : 将容器盒模型作为块级弹性伸缩盒显示
  •   inline-box : 将容器盒模型作为内联级弹性伸缩盒显示

PS：我们知道块级它是占用整行的，比如div元素；而内联级不占用整行，比如span元素。但是我们设置了整个盒子，他们都不占用，保持一致。就像我们上面的例子一样，给div元素设置了盒子，那么div元素里面的p元素就不占用了。

下面介绍旧版本弹性布局的各个属性：

align-self

[align-self]用来在单独的伸缩项目上覆写默认的对齐方式，这个属性是用来覆盖伸缩容器属性align-items对每一行的对齐方式。也就是说在默认的情况下这两个值是相等的。

JavaScript

align-self: auto | flex-start | flex-end | center | baseline | stretch

1
align-self: auto | flex-start | flex-end | center | baseline | stretch

align-items属性

align-items
属性规定灵活容器内的各项的默认对齐方式，和旧版本中的box-align一样，处理伸缩项目容器的额外空间。

CSS

div{ display:flex; align-items:center; }

1
2
3
4
div{
    display:flex;
    align-items:center;
}

效果如下：

图片 15

那么，此属性的属性值有：

  • flex-start ： 伸缩项目以顶部为基准，清理下部的额外空间
  • flex-end ： 伸缩项目以底部为基准，清理上部的额外空间
  • center ： 伸缩项目以中部为基准，平均清理上下部的额外空间
  • baseline ： 伸缩项目以基线为基准，清理额外的空间
  • stretch ： 伸缩项目填充整个容器，默认值

这些效果跟旧版本的box-align基本是一样的，具体怎么用，大家自己试一下就知道了。

CSS3弹性伸缩布局简介

2009年，W3C提出了一种崭新的方案—-Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局，所以本次主要讲解一下旧版本和新版本在移动端使用的各个知识点，让大家对神秘的flex布局熟悉起来。

align-items

[align-items]用来定义伸缩项目在侧轴的对齐方式，这类似于[justify-content]属性，但是是另一个方向。（flex-directon和flex-wrap是一对，justify-content和align-items是一对，前者分别定义主轴和侧轴的方向，后者分别定义主轴和侧轴中项目的对齐方式）。

  • align-items:flex-start;伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。
  • align-items:flex-end;伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
  • align-items:center;伸缩项目的外边距在侧轴上居中放置。
  • align-items:baseline;如果伸缩项目的行内轴与侧轴为同一条，则该值与[flex-start]等效。
    其它情况下，该值将参与基线对齐。
  • align-items:stretch;伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

下面demo只展示center和stretch的栗子，其他几个可以参考flex-start和flex-end那样。

图片 16

justify-content属性

justify-content
在当灵活容器内的各项没有占用主轴上所有可用的空间时对齐容器内的各项（水平）。

CSS

div{ display:flex; justify-content:space-around; }

1
2
3
4
div{
    display:flex;
    justify-content:space-around;
}

效果如下：

图片 17

可以看到所有项目平均分布，而且两端也有保留一半的空间。

此属性的属性值有：

  • flex-start ： 伸缩项目以起始点靠齐
  • flex-end ： 伸缩项目以结束点靠齐
  • center ： 伸缩项目以中心点靠齐
  • space-between ： 伸缩项目平均分布
  • space-around ： 伸缩项目平均分布，但两端保留一半的空间

因为这些效果还是很容易就理解了，这里我就不一一演示了。

box-orient 属性

box-orient属性主要实现盒子内部元素的流动方向。

CSS

div{ display:-webkit-box; display:box; -webkit-box-orient:vertical;
box-orient:vertical; }

1
2
3
4
5
6
div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:vertical;
    box-orient:vertical;
}

此时的结果就是垂直排列：

图片 18

 

此属性的属性值有：

  • horizontal ： 伸缩项目从左到右水平排列
  •     vertical  ： 伸缩项目从上到下垂直排列
  • inline-axis ： 伸缩项目沿着内联轴排列显示
  • block-axis ： 伸缩项目沿着块轴排列显示

大家不妨试一下：horizontal 和 inline-axis 都是水平排列，而vertical 和
block-axis 都是垂直排列。

justify-content

[justify-content]用于定义伸缩项目在主轴上面的的对齐方式，当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

  • justify-content:flex-start;伸缩项目向主轴的起始位置开始对齐，后面的每元素紧挨着前一个元素对齐。
  • justify-content:flex-end;伸缩项目向主轴的结束位置对齐，前面的每一个元素紧挨着后一个元素对齐。
  • justify-content:center;伸缩项目相互对齐并在主轴上面处于居中，并且第一个元素到主轴起点的距离等于最后一个元素到主轴终点的位置。以上3中都是“捆绑”在一个分别靠左、靠右、居中对齐。
  • justify-content:space-between;伸缩项目平均的分配在主轴上面，并且第一个元素和主轴的起点紧挨，最后一个元素和主轴上终点紧挨，中间剩下的伸缩项目在确保两两间隔相等的情况下进行平分。
  • justify-content:space-around;伸缩项目平均的分布在主轴上面，并且第一个元素到主轴起点距离和最后一个元素到主轴终点的距离相等，且等于中间元素两两的间距的一半。完美的平均分配，这个布局在阿里系中很常见。

还是看demo理解起来快一点：

图片 19

图片 20

align-self属性

align-self 和align-items
一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的值和align-itmes
一致。

CSS

p:nth-child(2){ align-self:center; }

1
2
3
p:nth-child(2){
    align-self:center;
}

此时的效果就是：

图片 21

其他属性值的效果同align-items，这里就不赘述。

box-pack属性

box-pack 属性用于伸缩项目的分布方式。

此属性的属性值有：

  • start   :  伸缩项目以起始点靠齐
  •   end   :  伸缩项目以结束点靠齐
  • center :  伸缩项目以中心点靠齐
  • justify  :  伸缩项目平局分布

下面我们都试一下各个属性值的效果：

1.start属性值

CSS

div{ -webkit-box-pack:start; box-pack:start; }

1
2
3
4
div{
    -webkit-box-pack:start;
    box-pack:start;
}

这个就是默认靠齐方式：

图片 22

2.end属性值

CSS

div{ -webkit-box-pack: end ; box-pack: end ; }

1
2
3
4
5
6
div{
    -webkit-box-pack:
end ;
    box-pack:
end ;
}

这个就是以结束点靠齐：

图片 23

3.center属性值

CSS

div{ -webkit-box-pack: center ; box-pack: center ; }

1
2
3
4
5
6
div{
    -webkit-box-pack:
center ;
    box-pack:
center ;
}

这就是居中对齐效果：

图片 24

 

4.justify属性值

CoffeeScript

div{ -webkit-box-pack: justify ; box-pack: justify ; }

1
2
3
4
5
6
div{
    -webkit-box-pack:
justify ;
    box-pack:
justify ;
}

这个就是平均分布效果：

图片 25

PS:垂直方向上也是一样的原理，但如果height为auto的话，效果将出不来。所以需要给height设置一个定高（最好比默认情况高）。这时，就能看到在垂直方向上的效果了。这里我就不再赘述了。

order

有一种用法比较多，想设置一组中有两个元素一个排第一，另外一个排最后，主需要将第一个的order:-1；另一个为order:0;这样就好了。

譬如我们想控制一个container中有4个box，想box4为一个显示，box1为最后一个显示。只需要
这样

<style> .container{ display: flex; } .box1{ order:1; } .box4{
order:-1; } </style> <div class=”container”> <div
class=”box1″>1</div> <div class=”box2″>2</div>
<div class=”box3″>3</div> <div
class=”box4″>4</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.container{
        display: flex;
    }
    .box1{
        order:1;
    }
    .box4{
        order:-1;
    }
</style>
<div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</div>

显示效果就这样了：

图片 26

相关文章

No Comments, Be The First!
近期文章
近期评论
    文章归档
    分类目录
    功能
    网站地图xml地图