xml地图|网站地图|网站标签 [设为首页] [加入收藏]

CSS3弹性伸缩布局,我对Flexbox布局模式的理解

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:83 发布时间:2019-05-02
摘要:CSS三弹性伸缩布局(2)——flex布局 2015/09/02 · CSS ·CSS3 原作出处: 郭锦荣    上1篇博客《CSS三弹性伸缩布局(一)——box布局》介绍了旧版本的box布局,而那篇博客将主要介绍最新版

CSS三弹性伸缩布局(2)——flex布局

2015/09/02 · CSS · CSS3

原作出处: 郭锦荣   

上1篇博客《CSS三弹性伸缩布局(一)——box布局》介绍了旧版本的box布局,而那篇博客将主要介绍最新版本的flex布局的基础知识。

新本子简要介绍

新本子的Flexbox模型是2011年四月提议的行事草案,那一个草案是由W3C 推出的新颖语法。这一个本子立志于钦赐职业,让新型的浏览器全面合作,在未来浏览器的更新换代中落成合并。

CSS三弹性伸缩布局(壹)——box布局

2015/08/23 · CSS · CSS3

原来的书文出处: 郭锦荣   

自己对Flexbox布局格局的知情

2016/06/18 · CSS · Flexbox

正文笔者: 伯乐在线 - Tw93 。未经小编许可,禁止转发!
招待参预伯乐在线 专辑作者。

Flexbox,一种CSS三的布局方式,也称为弹性盒子模型,用来为盒装模型提供最大的灵活性。首先举三个尖栗,在此之前大家是这样实现3个div盒子水平垂直居中的。在知情对象高宽的境况下,对居桐月素绝相比重定位,然后通过margin偏移的格局来兑现。

<style> .container{ width: 600px; height: 400px; border: 1px solid #000; position: relative; } .box{ width: 200px; height: 100px; border: 1px solid #000; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top:-50px; } </style> <div class="container"> <div class="box"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .container{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
    }
    .box{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top:-50px;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

万一使用了flex后,落成起来就简单了,而且不供给团结去算,也不必要相对定位,只须求经过对伸缩容器定义三个性子,justify-content定义伸缩项目沿着主轴线的对齐格局为center, align-items定义伸缩项目在侧轴(垂直于主轴)的对齐格局为center,具体如下:

<style> .container{ width: 600px; height: 400px; border: 1px solid #000; display: flex; justify-content:center; align-items:center; } .box{ width: 200px; //宽度可感觉自便 height: 100px; //高度可认为随便border: 1px solid #000; } </style> <div class="container"> <div class="box"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.container{
    width: 600px;
    height: 400px;
    border: 1px solid #000;
    display: flex;
    justify-content:center;
    align-items:center;
}
.box{
    width: 200px;  //宽度可以为任意
    height: 100px; //高度可以为任意
    border: 1px solid #000;
}
</style>
<div class="container">
    <div class="box"></div>
</div>

实际上Flexbox的突出本性并不是那有些,首先来一张它的质量图吧~

图片 1

率先大家来分析下这一张图,从第二个子节点能够看到Flexbox由Flex容器和Flex项目整合,容器即父成分,项目即子成分。他们之间的壹部分提到能够那样来表示:

图片 2

那张图能够在接下去的性质分析中用到。

此间大家依然再而三上1篇博客中的例子,使用最新版本的flex布局来落成平等的效率。

html代码:

XHTML

<div> <p>发生过的长空还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科学技术傻空给发生过的空间依旧看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很通透到底啊是高科技(science and technology)傻空给</p> <p>发生过的半空中依旧看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科学技术傻空给</p> <p>产生过的上空照旧看价格哈健康啊水果和卡刷卡更何况规划</p> </div>

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

基础的css代码:

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;
}

这会儿大家给div成分设置display属性为flex :

CSS

div{ display:flex; }

1
2
3
div{
    display:flex;
}

刷新浏览器后的功效是:

图片 3

能够观望效果跟旧版本的-webkit-box是如出一辙的。

在新本子中装置为弹性伸缩盒的display属性值有三个:

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

看一下新本子的flex布局的浏览器包容情况:

图片 4

PS:能够见到,在有的比较旧的webkit内核的浏览器(Chrome,Safari)中,大家供给运用-webkit-flex来做合营,不过此地自身就总结了。

上边将依次介绍flex布局的逐条属性的根基用法:

CSS三弹性伸缩布局简要介绍

2008年,W3C提出了1种全新的方案—-Flex布局(即弹性伸缩布局),它能够便捷、完整、响应式地达成各样页面布局,包蕴直接令人很胃疼的垂直水平居中也变得很简短地就减轻了。但是那么些布局格局还地处W3C的草案阶段,并且它还分为旧版本、新本子以及混合过渡版本三种分化的编码格局。当中混合过渡版本首假诺针对性IE十做了十分。近期flex布局用得相比多的依然在运动端的布局,所以此番重大教学一下旧版本和新本子在活动端采纳的种种知识点,让大家对地下的flex布局纯熟起来。

Flex容器

flex-direction属性

flex-direction属性用于安装伸缩项目标排列情势。

CSS

div{ display:flex; flex-direction:column; }

1
2
3
4
div{
    display:flex;
    flex-direction:column;
}

功效如下:

图片 5

结果就是容器内的享有类型比照从上到下排列的。

当您设置为row-reverse时,效果就是:

图片 6

其一是从浏览器的动手往左侧排列的。

此属性的属性值有:

  • row : 设置从左到右排列
  • row-reverse : 设置从右到左排列
  • column : 设置从上到下排列
  • column-reverse : 设置从下到上排列

大家无妨都试一下,看看每四个的效率怎样。

旧版本(box)

首先看一下浏览器包容情形:

图片 7

 

PS:浏览器包容数据不自然很纯粹,不过相距非常小。

上边将因而一个轻便易行的实例来上课旧版本的逐一属性:

html代码:

<div> <p>产生过的长空依旧看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很绝望啊是高科技(science and technology)傻空给产生过的空中仍旧看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很绝望啊是高科学技术傻空给</p> <p>爆发过的长空仍然看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很绝望啊是高科技(science and technology)傻空给</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;
}

那时候刷新网页看到的结果是这么的:

图片 8

这一个结果很健康啊!OK,未来我们给div元素设置为box,看看有何样变化:

CSS

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

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

大家重新刷新网页,结果是这么的:

图片 9

探望了啊,未来每贰个p成分都成为1个box了,那就是弹性布局的奇妙所在!

在地点中,我们将div成分的display设置为box,那便是旧版本的弹性布局。对于比较旧的浏览器版本,我们须求增添-webkit-前缀。

旧版本的弹性布局有多个属性值:

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

PS:我们知晓块级它是占据整行的,举个例子div成分;而内联级不占用整行,举例span成分。可是大家设置了上上下下盒子,他们都不占用,保持1致。就像大家地点的事例同样,给div成分设置了盒子,那么div成分里面的p成分就不占用了。

下边介绍旧版本弹性布局的次第属性:

display:flex

当大家利用flexbox布局时候,供给先给父容器的display值定位flex(块级)恐怕inline-flex(行内级)。

当使用了那一个值之后,伸缩容器会为内容建构新的伸缩格式化上下文(FFC),它的上下文显示效果和BFC根成分同样(BFC天性:浮动不会闯入伸缩容器,且伸缩容器的疆界不会与其内容边界叠加)。

伸缩容器不是块容器,由此某些设计用来支配块布局的属性,在伸缩布局中不适用,尤其是多栏(column),float,clear,vertical-align那几个属性。

flex-wrap属性

flex-wrap属性设置项目标换行情势(当容器宽度不足以容纳全数子项目时)。

CSS

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

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

那时候结果如下:

图片 10

能够看看,当自己把浏览器窗口裁减时,第6个p成分因为容纳不下而被挤下来了。

此属性的属性值有:

  • nowrap : 默许值,都在一行只怕一列中体现
  • wrap : 伸缩项目无法包容时,自动换行
  • wrap-reverse : 伸缩项目不大概容纳时,自动换行,方向和wrap相反

当自家将flex-wrap属性设置为wrap-reverse时,运营后的成效正是成为那样:

图片 11

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;
}

那时候的结果就是笔直排列:

图片 12

 

此属性的属性值有:

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

我们不要紧试一下:horizontal 和 inline-axis 都是水平排列,而vertical 和 block-axis 都是垂直排列。

flex-direction

[flex-direction]属性用来调整上海体育场地中伸缩容器中主轴的主旋律,同时也决定了伸缩项目标可行性。

  • flex-direction:row;也是私下认可值,即主轴的趋势和不奇怪的趋向一样,从左到右排列。
  • flex-direction:row-reverse;和row的方向相反,从右到左排列。
  • flex-direction:column;从上到下排列。
  • flex-direction:column-reverse;从下到上排列。 以上只针对ltr书写格局,对于rtl正好相反了。

网页彰显效果如下:

图片 13

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。效果就是这样的:

图片 14

box-direction属性

box-direction 属性紧倘使安装伸缩容器中的流动顺序。

CSS

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

1
2
3
4
5
6
div{
    display:-webkit-box;
    display:box;
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

如此那般大家的排序就是反序的了,运维结果为:

图片 15

此属性的属性值有:

  • normal  : 常常顺序,默许值
  • reverse : 反序

flex-warp

[flex-wrap]属性决定伸缩容器是单行依然多行,也调控了侧轴方向(新的一行的堆集方向)。

  • flex-wrap:nowrap;伸缩容器单行展现,暗中同意值;
  • flex-wrap:wrap;伸缩容器多行突显;伸缩项目每一行的排列顺序由上到下相继。
  • flex-wrap:wrap-reverse;伸缩容器多行展现,不过伸缩项目每一行的排列顺序由下到上每家每户排列。

网页效果见图;

图片 16

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:CSS3弹性伸缩布局,我对Flexbox布局模式的理解

关键词: 68399皇家赌场 CSS

上一篇:到底是干什么的

下一篇:没有了

最火资讯