display 常用元素标签含义

Display

 

容器 项目       主轴 交叉轴

 

容器的内容

Display：flex

Display设置为flex，则当前标签为容器，子元素为项目。

功能： 所有子元素在一行显示。

设置主轴方向：

             flex-direction

·flex-direction：row；（主轴-从左往右）

·flex-direction：row-reverse；（改变主轴的方向-从右往左排列）

    ·flex-direction：column；（交叉轴-从上往下）

    ·flex-direction：column-reverse；（改变主轴的方向-从下往上排列）

 

换行：

       flex-wrap：nowrap；(不换行) 默认值

       flex-wrap：wrap；(换行) 主轴是水平方向所有项目宽度之和大于容器宽度。

                              或主轴是垂直方向所有项目高度之和大于容器宽度。

主轴和换行的缩写：flex-flow：row wrap；（水平方向位置  换行）

justify-content主轴方向的对齐方式

 

情况1：主轴是水平方向：

 justify-content: flex-start：左对齐（默认）起始对齐

 justify-content: flex-end： 右对齐  末尾对齐

 justify-content :flex-center：  居中对齐

 justify-content: space-around： 两端对齐 元素间距相同 左右相加等于中间间距

 justify-content: space-between;  元素间距相同，左右元素没有间距

 justify-content: space-evenly;  所有元素间距完全相同

 

文本的对齐方式

 

align-items：（不换行）

 

顶线 top line      中线middle line     基线base line      底线 bottom line

 

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

 

flex-end：交叉轴终点对齐。

 

Center： 交叉轴的中点对齐

 

Baseline：项目的内容的文字的基线对齐

 

Stretch：（默认值）如果未设置项目的高度或设为auto，则充满容器的高度。

 

 

多根轴线对齐方式（换行）align-content

 

情况1：主轴是水平方向

 

Flex-start    多行顶部对齐

 

flex-end     多行在底部对齐

 

Center      多行垂直居中

 

space-between  垂直方向两端对齐

 

space-around   垂直方向分散对齐

 

space-evely     垂直方向平均分配