初探flex布局

栏目: Html · 发布时间: 4年前

内容简介:flex布局的相关属性可以分成两类:详细属性如下:下面分别对以上flex属性做讨论。以下部分示例图片的DOM结构如下:

flex布局的相关属性可以分成两类:

  1. 父元素 设置的属性,控制父元素内所有子元素的布局
  2. 子元素 设置的属性,单独控制某个子元素的位置

详细属性如下:

对父元素 对子元素
flex-direction order
flex-wrap flex-grow
flex-flow flex-shrink
justify-content flex-basis
align-content flex
align-items align-self

下面分别对以上flex属性做讨论。以下部分示例图片的DOM结构如下:

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <!-- <div class="child">4</div> -->
    <!-- <div class="child">5</div> -->
</div>
复制代码

其中 .parent 为设置 display:flex 的父元素为绿色, .child 为被布局的子元素.

flex布局中涉及flex父元素的主轴和交叉轴的概念,他们是可以改变的,但是本文 只取默认情况 ,即主轴为水平轴,交叉轴是竖直轴,在这篇文章中固定不变。所以文中提到的“左右”是主轴方向,而“上下”就是交叉轴方向。如图:

初探flex布局

2. 对 父元素 设置的属性们

对父元素设置的属性可以控制子元素整体的布局方法。

2.1 flex-direction

flex-direction 属性设置父元素中子元素的排列方向,取值为:

flex-direction: row || row-reverse || column || column-reverse
复制代码

其中 || 符号表示或。

当取值为:

  • row :以行的形式排列,一般为从左到右(==>)排列,示意图如下

    初探flex布局
  • row-reverse :以行的形式排列,只是方向和row反过来, 一般为从右向左(<==)排列,示意图如下

初探flex布局
  • column :以列的形式排列,一般为从上到下排列,示意图如下

    初探flex布局
  • column-reverse :以列的形式排列,只是方向和column反过来, 一般为从下向上排列,示意图如下

    初探flex布局

2.2 flex-wrap

这个属性中包含 wrap , 顾名思义, 这是个控制子元素换行的属性, 取值为:

flex-wrap: nowrap || wrap || wrap-reverse;
复制代码
  • nowrap : 不换行,而且会把子元素的宽压缩以确保不溢出父元素

    初探flex布局
  • wrap : 会换行

    初探flex布局
  • wrap-reverse : 换行,同时方向反过来

    初探flex布局

2.3 flex-flow

这是个复合属性, 是前面提到的两个属性的复合,即:

flex-flow: flex-direction flex-wrap
复制代码

例如:

  • flex-flow: row-reverse nowrap
    相当于:
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    复制代码
初探flex布局
  • flex-flow: row-reverse wrap
    相当于:
    flex-direction: row-reverse;
    flex-wrap: wrap;
    复制代码
初探flex布局

2.4 justify-content

这个属性控制子元素在水平方向的对齐方式, 取值如下:

justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly;
复制代码

当取值分别如下时:

  • flex-start : 左对齐,从左至右排列

    初探flex布局
  • flex-end : 右对齐,向左排列

    初探flex布局
  • center : 居中对齐

    初探flex布局
  • space-between : 每个子元素分散开, 只在中间的子元素之间留空白,两侧的子元素靠边贴着

    初探flex布局
  • space-around : 子元素分散,每个子元素两侧都有相等大小的空间,但是子元素之间的空间不合并,所以子元素之间的空间是子元素和父元素之间空间的2倍,如图所示:

    初探flex布局
  • space-evenly : 子元素之间以及子元素和父元素之间的空隙相等, 如图所示:

    初探flex布局

2.5 align-content

这个属性和 2.4部分的 justify-content 有些相似,不过此属性是控制垂直方向的, 取值有:

align-content: stretch || flex-start || flex-end || center || space-between || space-around || space-evenly;
复制代码

当取值分别如下时:

  • flex-start : 默认值,从上到下排列:

    初探flex布局
  • flex-end : 从下到上

    初探flex布局
  • center : 子元素聚集到中轴线

    初探flex布局
  • space-between :

    初探flex布局
  • space-around :

    初探flex布局
  • space-evenly :

    初探flex布局

- stretch : 顾名思义,有拉伸的意思,当元素的高度自适应时,会拉伸每个子元素的高度来把父元素填满,如图:

初探flex布局
注意:如果给子元素指定了高度,则和默认效果 flex-start

相同。

2.6 align-items

此属性控制所有子元素在水平方向上的对齐方式,取值可为:

align-items: stretch | flex-start | flex-end | center | baseline;
复制代码

为更利于此属性的表现,分别调节子元素的高度和字体大小。 当取值分别如下时:

  • flex-start : 默认值,顶部对齐:

    初探flex布局
  • flex-end : 底部对齐

    初探flex布局
  • center : 垂直中轴线对齐

    初探flex布局
  • baseline : 子元素以文字基线对齐

    初探flex布局
    初探flex布局

- stretch : 和上面一样,当元素的高度自适应时,会拉伸每个子元素的高度来把父元素填满,如图:

初探flex布局

3. 对子元素设置的属性

3.1 order

这个属性可以控制一个子元素相对于其他子元素的 前后 位置,属性值是整数,默认值是0,可以取负整数。

属性值越小,则相对于其他子元素的位置越靠前,例如对三个子元素分别设置order属性为-3,-2,-1,即

.child:first-child {
    order: -1;
}

.child:nth-child(2) {
    order: -2;
}

.child:nth-child(3) {
    order: -3;
}
复制代码

由于 -3<-2<-1 ,故第3个子元素在最前,第一个子元素在最后,如图:

初探flex布局
在父元素设置为 flex-direction: column;

时:

初探flex布局

3.2 flex-grow

这个属性表示元素在宽度上对于剩余空间的使用比例,取值为大于等于0的数,默认是0, 即不扩张。这听起来有些抽象,以一个图为例:

初探flex布局
上图中父元素宽度为350px,有三个子元素在一行上, 每个子元素宽度都是100px,三个子元素共300px宽度,则父元素在这一行还剩余 350-300=50px 的主轴宽度空间没有被填满,而这50px的剩余宽度可以分配给这一行的子元素增加到子元素的宽度里。 flex-grow

属性值决定了一个子元素能拿到的这部分剩余宽度里的多少。

假设三个子元素的 flex-grow 属性分别设置为1、2、3, 则第一个元素占了总比例的 1/(1+2+3)=1/6 , 同理第二个元素占了 2/6 , 第三个元素占了 3/6 , 所以这3个子元素分别能占有 50*(1/6)px50*(2/6)px50*(3/6)=25px ,即宽度分别增加了以上的宽度,第3个子元素占有(增加)的宽度最多,第1个子元素增加的宽度最少,即如图:

初探flex布局

如果所有子元素的flex取值相加的和小于1,则每个元素的值就是占剩余宽度的比例,例如三个子元素的 flex-grow 分别设置为0.1、0.2、0.3,则三个元素占有的剩余宽度分别是 0.1*50=5px0.2*50=100.3*50=15px , 效果图如下:

初探flex布局

3.3 flex-shrink

这个属性设置当父元素宽度不足时子元素的宽度收缩比例, 和上面的 flex-grow 正好相反, 但是收缩的方法和后者相同。默认值是1, 即收缩相同的宽度。为便于展示, 将子元素宽度都设置成150px, 如图:

初探flex布局
flex-shrink 就是设置每个子元素相对于150px的收缩比例,决定每个子元素收缩多少宽度的方法和 flex-grow 相同,举两个例子,当三个子元素都设置成1时, 则每个子元素都收缩 1/3*150=50px

,如图:

初探flex布局

三个子元素分别设置0.1、0.2、0.3,则三个子元素的宽度分别收缩15px、30px、45px,第三个子元素宽度收缩最大,效果如下:

初探flex布局

3.4 flex-basis

这个属性设置子元素的宽度,会代替width属性,也就是说如果同时设置了width和flex-basis,则width会被忽略,以flex-basis为准。默认值是auto。

当所有子元素的宽度相加超过父元素的宽度时,所有子元素会等比例收缩,效果相当于设置所有子元素的 flex-shrink: 1;

3.5 flex

这是个复合属性: flex: flex-grow flex-shrink flex-basis; ,后两个参数是可选的。

3.6 align-self

这个属性控制子元素本身的对齐方式, align-self: auto | flex-start | flex-end | center | baseline | stretch; ,默认值是auto, 表示继承父元素的 align-items 的属性值。

当设置父元素的 align-items: center; 时, 对第二个子元素设置 align-item 属性, 取不同值时的效果如下:

  • auto : 继承自父元素的 align-items

    初探flex布局
  • flex-start : 对齐顶部

    初探flex布局
  • flex-end : 对齐底部

    初探flex布局
  • center : 中轴线对齐

    初探flex布局
  • baseline : 基线对齐

    初探flex布局
  • stretch : 拉伸高度以填满父元素的高度

    初探flex布局

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品经理的第二本书

产品经理的第二本书

[美] 哥乔斯 / 戴维侬 / 中国财政经济出版社 / 2004-4 / 39.80元

产品经理的第二本书:产品经理实战技巧指南,ISBN:9787500570950,作者:(美)琳达·哥乔斯(Linda Gorchels)著;戴维侬译;戴维侬译一起来看看 《产品经理的第二本书》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具