Flex布局全攻略—CSS里Flex相关的属性推荐 原创 收藏


  • :
  • 04-11 21:31
  • :
  • 14次
  • :
  • 0条
  • 2赞

简介本文整理了CSS里和flex相关的所有属性,通过本文,可以让你快速的掌握CSS里flex布局和使用。

本文,站长整理了一下CSS里和flex相关的所有属性,整理的同时,也是一个自我学习的过程。

站长在写这篇文章时,参考了多个网站上的资料,不过总有种“看着很累”的感觉,所以才打算自己再次整理编辑一下,方便自己,也方便那些同样需要的朋友!

一:认识Flex:

不需要太去计较Flex是什么,只要我们明白以下几点就行了:

  1. 主流浏览器都已支持flex,不用担心兼容的问题;

  2. Flex是未来网页布局的首选,称为“弹性布局”,比我们原来布局时用的display、positon和float要方便很多;

  3. 任何标签,包括容器标签(如div)和行内元素标签(如span )都可以设置为flex:

//容器:
<div style="display:flex"></div>

//行内元素:
<span style="display:inline-flex"></span>

//如果要兼容Webkit内核的浏览器(如谷歌浏览器)的话,属性前要加 -webkit :
<div style="display:-webkit-flex;display:flex;"></div>

二:和Flex相关的几个概念:

  1. Flex容器(Flex container)  指的是用flex布局的元素,直白的话说就是css属性display为flex的;

  2. Flex项目(Flex item)  : 指窗口里的所有子元素标签,(但不包含子元素的元素);

  3. 水平主轴(main axis)  :容器的水平线,左侧与窗器边缘的交叉点叫main start,右侧的是main end; 

  4. 垂直交叉轴(cross axis)  : 窗口的垂直线,顶部与容器国家级的交叉点叫cross start,底部的是cross end;

  5. Flex项目(Flex item)的宽度叫main size,高度叫cross size;(其实用高和宽来形容不太准确,准确的描述是占据的水平主轴长度和占据垂直交叉轴的距离)。

Flex布局全攻略—CSS里Flex相关的属性_1

三:Flex容器的相关属性:

1》:flex-direction  主轴的方向(即项目的排列方向):

        row 默认值 ,主轴为水平方向,起点在左端;

        row-reverse : 主轴为水平方向,起点在右端;

        column主轴为垂直方向,起点在上端;

        column-reverse主轴为垂直方向,起点在下端;

2》flex-wrap 设定容器内Flex项目(flex item)的排列,相当于CSS里的word-wrap属性:

        nowrap默认值 ,表示不换行;

        wrap  : 换行,第一行在上;

        wrap-reverse换行,第一行在下;

3》flex-flow flex-direction 和flex-wrap的缩写方式,默认值就是上面两个属性的默认值:row nowrap; 

        如:.FlexBox {flex-flow:column wrap};

4》justify-content : 设定容器内Flex项目在水平主轴上的对齐方式:

        flex-start 左对齐,(左是相对的,真正的意思是从起点开始排列,如果flex-direction设置为row-reverse 那么起点就在右端,flex-start就成右对齐了);

        flex-end  : 右对齐,道理同上;

        center  : 居中对齐;

        space-between  : 两端对齐;

        space-around  :每个项目两侧的间隔相等,表现出来的结果就是项目之间的距离是项目和容器边缘距离的两倍;

5》align-items设置容器内Flex项目在垂直交叉轴(也就是垂直方向)上的对齐方式:

        stretch默认值,如果Flex项目,也就是容器内的子标签未设置高度,就占满容器的整个高度;

        flex-start顶对齐;

        flex-end  : 底对齐;

        center  : 中心对齐,也就是我们经常会用到的垂直居中对齐了;

        baseline  : 项目的第一行文字的基线对齐。

6》align-content  : 当容器内有多行项目时,设置多行项目的对齐方式,有点类似word里段落中行的对齐方式:

        stretch默认值,项目会均分容器的高度,铺满整个容器,比如Flex项目三行,每行占1/3的高度;

        flex-start  : 把多行项目当成一个整体,在容器里“顶部”对齐;

        flex-end  :  把多行项目当成一个整体,在容器里“底部”对齐;

        center  : 把多行项目当成一个整体,在容器里“中心(垂直居中)”对齐;

        space-between : 多行项目里的第一行顶对齐,最后一行底对齐,其它行的项目均分中间剩余的高度;

        space-around  : 每行项目的上下两侧间距相等,表现出来的就是“行”与“行”间的距离是与容器上下边缘的两倍;

    PS:上面的文字解释都是站长用自己话来描述的,参考下面这张图,会更容易理解:

Flex布局全攻略—CSS里Flex相关的属性_2

四:Flex项目(Flex item)的相关属性:

1》order : 项目的排序,使用bootstrap的朋友应该对这个属性不陌生,默认值为0;

2》flex-grow : 设置项目的放大比例,默认为0,即不放大:

  1. 如果所有Flex item的flex-grow设置为1,则均分容器的宽度;

  2. 如果一个项目的flex-grow为2,其它的为1,那么它的宽度就是别的项目的两倍;

3》: flex-shrink设置项目的缩小比例,默认为1,表示如果容器的空间不足,则缩小项目:

  1. 如果其中一个Flex item的flex-shrink为0,其它的项目为1,则在容器空间不足时,它不缩小,flex-shrink值为1的其它项目都会缩小;

4》flex-basis : 设置项目的默认宽,默认值为auto,可以设置为具体的数值,如“300px”;

5》flex为上面三个属性的缩写,即:flex-grow 、flex-shrink和flex-basis;该属性有两个类似“快捷键”的值:

  1. flex:auto  : 等价于 flex:1 1 auto;

  2. flex:none : 等价于 flex:0 0 auto; 

6》align-self : 设置项目的排列方式,默认值为auto,表示继承容器的align-items属性,如果没有父元素,则等同于stretch,除了auto外,还可设置为 flex-start | flex-end | center | baseline | stretch ,含义和上面容器的align-items属性的值一模一样。



您正在找的文章可能是: