zoukankan      html  css  js  c++  java
  • flex 布局教程

    flex 布局教程

    flex可以实现垂直和主轴的一些操作简单方便,主要通过一些属性来实现

    flex有以下六个属性

    flex-direction属性:

    属性决定主轴的方向(即项目的排列方向)

    1. row(默认值):主轴为水平方向,起点在左端。
    2. row-reverse:主轴为水平方向,起点在右端。
    3. column:主轴为垂直方向,起点在上沿。
    4. column-reverse:主轴为垂直方向,起点在下沿。

    flex-wrap属性:

    默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

    1. nowrap(默认):不换行。
    2. wrap:换行,第一行在上方。
    3. wrap-reverse:换行,第一行在下方。

    justify-content属性:

    属性定义了项目在主轴上的对齐方式。

    1. flex-start(默认值):左对齐
    2. flex-end:右对齐
    3. center: 居中
    4. space-between:两端对齐,项目之间的间隔都相等。
    5. space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    align-items属性:

    属性定义项目在交叉轴上如何对齐。

    1. flex-start:交叉轴的起点对齐。
    2. flex-end:交叉轴的终点对齐。
    3. center:交叉轴的中点对齐。
    4. baseline:项目的第一行文字的基线对齐。
    5. stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    align-content属性

    属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

    1. flex-start:与交叉轴的起点对齐。
    2. flex-end:与交叉轴的终点对齐。
    3. center:与交叉轴的中点对齐。
    4. space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    5. space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    6. stretch(默认值):轴线占满整个交叉轴。。

    align-self属性:

    属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的
    flex-start | flex-end | center | baseline | stretch;

    文字也可以使用flex布局
    display:inline-flex

  • 相关阅读:
    DateDiff(timeinterval,date1,date2 [, firstdayofweek [, firstweekofyear]])
    将BYTE[]中的字符的16进制形式作为字符串存入CString对象并返回
    VC调用存储过程的通用方法(ORACLE篇)
    Oracle中插入Date数据
    Oracle 存储过程返回结果集怎么这么费劲?
    从字符串中提取BCD码,转换为UINT数据并返回
    Know more about AWR Parse Statistics
    Slide:了解Oracle在线重定义online redefinition
    11gR2新特性:LMHB Lock Manager Heart Beat后台进程
    利用Oracle在线重定义Online Redefinition清理历史数据
  • 原文地址:https://www.cnblogs.com/luckyjiu9/p/13650303.html
Copyright © 2011-2022 走看看