Flexbox布局

Flexbox布局

自己对Flexbox布局格局的知道

2016/06/18 · CSS ·
Flexbox

正文小编: 伯乐在线 –
Tw93
。未经小编许可,禁止转发!
应接到场伯乐在线 专辑小编。

Flexbox,1种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

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

  • flex首要用于响应式页面设计,包容各类宽度的装置
    flex布局写法:

flex布局有主轴和侧轴多个轴(main axis和cross
axis),那八个轴是能够调换的。

W3C解释:

In the flex layout model, the children of a flex container can be laid
out in any direction, and can “flex” their sizes, either growing to fill
unused space or shriking to avoid overflowing the parent. Both
horizontal and vertical alignment of the children can be easily
manipulated. Nesting of these boxes (horizontal inside vertical, or
vertical inside horizontal) can be used to build layouts in two
dimensions.

flexbox的出现是为了消除复杂的web布局,因为这种布局情势很灵敏。容器的子成分能够随意方向拓展排列。

Flex容器

暗中认可景况下,主轴是漫天容器的宽,侧轴是高。

Flexbox模型和术语:

flex布局模型分化于块和内联模型布局(总计正视于块和内联的流方向),flex布局依赖于flex
directions。即:Flexbox是布局模块,而不是三个粗略的性质,它含有父元素(flex
container)
子元素(flex items)的属性。

图片 3

Flex

图片 4

Flexbox

main axis | main dimension 主轴、主轴方向

cross axis | cross dimension 侧轴、侧轴方向

flex container
弹性容器:包涵着弹性项目标父元素,通过设置display属性为flex或inline-flex来定义弹性容器

flex
item弹性项目:弹性容器的各样子成分都号称弹性项目。弹性容器直接包蕴的文本将被包覆成匿名弹性单元。

display:flex

当大家选拔flexbox布局时候,须求先给父容器的display值定位flex(块级)大概inline-flex(行内级)。

当使用了这几个值之后,伸缩容器会为剧情创设新的伸缩格式化上下文(FFC),它的上下文体现效果和BFC根成分同样(BFC天性:浮动不会闯入伸缩容器,且伸缩容器的边际不会与其剧情边界叠加)。

伸缩容器不是块容器,因而某个设计用来调整块布局的习性,在伸缩布局中不适用,特别是多栏(column),float,clear,vertical-align那些属性。

div{
display:flex;
}

flex容器的具备属性,即父容器

Flexbox使用示例:

水平竖直居中:

<div class=”parent”><div
class=”child”></div></div>

将 .parent 的 display 属性设置为 flex,将 .child 的 margin 设置为 auto。

在Flex容器中,当项目边距设置为 auto
时,设置自动的垂直边距使该品种完全居中五个轴。

flex-direction

[flex-direction]属性用来调控上海教室中伸缩容器中主轴的倾向,同时也控制了伸缩项目的方向。

  • flex-direction:row;也是暗中认可值,即主轴的来头和正规的样子1致,从左到右排列。
  • flex-direction:row-reverse;和row的矛头相反,从右到左排列。
  • flex-direction:column;从上到下排列。
  • flex-direction:column-reverse;从下到上排列。
    以上只针对ltr书写方式,对于rtl正好相反了。

网页展现效果如下:

图片 5

行内元素flex布局:

flex-direction:设置主轴为容器的宽或高,侧轴与之相应的改动,调整flex项目标排序

主轴和侧轴是足以因而flex-direction属性来定义的。对应的品质如下:

flex-direction : row ;   //默许值,主轴为宽,从左往右

flex-direction : row-reverse ;  //主轴为宽 ,
从右往左,包含div的排列顺序也会倒置,从右往左排起

flex-direction : column ;   //主轴为高,侧轴为宽,从上往下

flex-direction : column ;  
//主轴为高,侧轴为宽,从下往上,div排列顺序也倒置

Flexbox属性:

1. dispaly(flex container)

display: other values | flex | inline-flex;

2. flex-direction(flex container)

flex-direction: row | row-reverse | column | column-reverse

珍视用于创立主轴,从而定义伸缩项目放置在伸缩容器的倾向。

图片 6

Flex-direction

3. order(flex items)

私下认可情状下,伸缩项目是奉公守法文书档案流出现先后顺序排列。而”order”属性能够决定伸缩项目在其伸缩容器中冒出的相继。

order: <integer>

4.flex-wrap(flex container)

要害用于定义伸缩容器里是单行依旧多行突显,侧轴的取向决定了新行堆成堆的自由化。

flex-wrap: nowrap | wrap | wrap-reverse

nowrap(暗中同意值):伸缩容器单行显示。

wrap:伸缩容器多行显示。

wrap-reverse:伸缩容器多行突显,方向与wrap相反。

5.flex-flow(flex container)

flex-direction 和 flex-wrap 属性的缩写版本。

6.justify-content(flex container):

概念伸缩项目沿着主轴线的对齐格局。当一行上的享有伸缩项目都不可能伸缩,或然可伸缩不过已经达标最大尺寸时,那1属性才会对余下的空间拓展分配。当项目溢出某一行时,该属性也会在类型的对齐上强加一些调整。

justify-content: flex-start | flex-end | center | space-between |
space-around;

图片 7

justify-content

7. align-content(flex container)

用来调准伸缩行在伸缩容器里的对齐形式。

align-content: flex-start | flex-end | center | space-between |
space-around | strench;

图片 8

align-content

8. align-items(flex container)

align-items: flex-start | flex-end | center | baseline | stretch;

图片 9

align-items

9. align-self(flex items)

用来在单独的伸缩项目上覆写暗中认可的对齐方式。

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

图片 10

align-self

10. flex-grow(flex items)

基于供给来定义伸缩项目标增加手艺。接受三个不带单位的值作为1个百分比。

注重用以决定伸缩容器剩余空间按比例应该扩充多少空间。

flex-grow: <number>;  /* 默认为0 */

若是具有伸缩项目该属性设置了壹,那么各个门类就设置为3个大小相等的剩余空间;要是给内部3个伸缩项目设置为二,那么那些项目所占的剩余空间是别的类别所占剩余空间的二倍。

图片 11

flex-grow

11. flex-shrink(flex items)

根据要求来定义伸缩项目收缩的力量。

12. flex-basis(flex items)

用来设置伸缩基准值,剩余的半空中按比例实行伸缩。

13. flex(flex items)

flex-grow、flex-shrink 和 flex-basis 一个属性的缩写。

flex-warp

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

  • flex-wrap:nowrap;伸缩容器单行凸显,暗中同意值;
  • flex-wrap:wrap;伸缩容器多行展现;伸缩项目每壹行的排列顺序由上到下一一。
  • flex-wrap:wrap-reverse;伸缩容器多行展现,可是伸缩项目每壹行的排列顺序由下到上所有人家排列。

网页效果见图;

图片 12

span{
display:inline-flex;
}

justify-content : 主轴对齐(针对主轴),调节flex项目标对齐方式

先要清楚设定的主轴是何许,再来设置那特个性,属性值如下:

justify-content : flex-start  
//私下认可值,遵照flex-direction设置的主轴顺序对齐排列

justify-content : flex-end 
//依照flex-direction设置的主轴顺序的终极进行对齐排列

justify-content : center  //中间点向两边延伸对齐

justify-content : space-between
//在主轴上,即布局格局的互相作为同时伊始的岗位,向中档排列,每一种子成分之间的间距相等

justify-content : space-around
//每种子成分两边都具有优良间隔,且子成分相互的区间不会重叠,所以子成分之间的距离比子元素与边框的距离大学一年级倍

发表评论

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

网站地图xml地图