flex



  • flex布局:轴线布局

    flex容器

    指定flex容器

    .container {
        display:		flex/inline-flex;
    }
    

    flex容器的属性

    1. flex-direction:row/row-reverse/column/column-reverse;

      决定主轴(main axis)的方向

      row:水平,起点左端

      row-reverse:水平,起点右端

      column:垂直,起点上端

      column-reverse:垂直,起点下端

    2. flex-wrap:nowrap/wrap/wrap-reverse

      决定容器内项目是否能换行

      nowrap:主轴尺寸固定,空间不足,不换行而调整项目尺寸

      wrap:主轴超出容器时换行,第一行在上

      wrap-reverse:主轴超出容器时换行,第一行在下

    3. justify-content:flex-start/flex-end/center/space-between/space-around

      定义项目在主轴(main axis)的对齐方式

      以当flex-direction:row时为例

      flex-start:左对齐

      flex-end:右对齐

      center:居中

      space-between:两端对齐,项目间距相等

      space-around:每个项目两侧的距离相等(项目间距是项目与边缘距离的两倍)

    4. align-items:flex-start/flex-end/center/baseline/stretch

      定义项目在交叉轴(cross axis)的对齐方式

      以当flex-direction:row时为例

      flex-start:交叉轴起点对齐

      flex-end:交叉轴终点对齐

      center:交叉轴中点对齐

      baseline:项目第一行文字(一般是文字底部)对齐

      stretch:当项目高度未设定(或auto)时,将占满整个容器高度

    5. align-content:flex-start/flex-end/center/space-between/space-around/stretch

      flex-start:与交叉轴的起点对齐。

      flex-end:与交叉轴的终点对齐。

      center:与交叉轴的中点对齐。

      space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

      space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

      stretch(默认值):轴线占满整个交叉轴。

    flex项目

    1. order:<integar>

      定义项目排列顺序;数值越小,排列越靠前

    2. flex-grow:<number>

      定义项目放大比例

      默认为0,即即使存在剩余空间也不放大

      属性为1的项目将等分剩余空间

      属性为2的项目占据剩余空间是为1的项目的两倍

    3. flex-shrink:<number>

      定义项目缩小比例

      默认为1,即空间不足时都等比例缩小

      属性为0的项目在空间不足时不会缩小

    4. flex-basis

      定义分配多余空间前,该项目占据的主轴空间

      浏览区根据这个属性,计算主轴是否有多余空间

      默认值为auto,即项目本来的大小(由width、height)决定

    5. flex

      flex-grow、flex-shrink、flex-basis的简写

    6. align-self:flex-start/flex-end/center/baseline/stretch

      允许单个项目有与其他项目不一样的对齐方式

      默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。

      就相当于align-items属性的单个项目的应用


 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

与 Dian 的连接断开,我们正在尝试重连,请耐心等待