css堆叠款式表flex延展性盒实体模型

1. 介绍

Flex是Flexible Box的简称,意思是”延展性合理布局”,用于为盒状实体模型出示较大的灵便性.

一切一个器皿都可以以特定Flex合理布局.

选用Flex合理布局的原素,称之为Flex器皿(flex container),通称”器皿”.它的全部子原素全自动称之为器皿组员,称之为Flex新项目(flex item),通称”新项目”.

留意:
box层沒有设定高宽比,设定了display:flex,因此flex里的新项目不是摆脱文本文档流的

flex里的新项目,总总宽假如不超出父级总宽,那麼就一切正常横着排序

flex里的新项目,总总宽假如超出父级总宽,那麼加给新项目的总宽就失效了,每一个新项目的总宽会全自动平均分

2. 基本要素

器皿默认设置存有二根轴:水准的主轴(main axis)和竖直的交叉式轴(cross axis)。主轴的刚开始部位(与外框的交叉式点)称为main start,完毕部位称为main end;交叉式轴的刚开始部位称为cross start,完毕部位称为cross end。

新项目默认设置沿主轴排序。单独新项目占有的主轴室内空间称为main size,占有的交叉式轴室内空间称为cross size。

3. 器皿的特性

下列6个特性设定在器皿上。

 

u flex-direction

u flex-wrap

u flex-flow

u justify-content

u align-items

u align-content

3.1. flex-direction特性

flex-direction特性决策主轴的方位(即新项目的排序方位)。

赋值:

row(默认设置值):主轴为水准方位,起始点在左方。

row-reverse:主轴为水准方位,起始点在右端。


column:主轴为竖直方位,起始点在上沿。


column-reverse:主轴为竖直方位,起始点在下沿。

3.2. flex-wrap特性

默认设置状况下,新项目都排到一根线(别称"轴线")上。flex-wrap特性界定,假如一条轴线排不下,怎样换行。

赋值:

nowrap(默认设置):不换行。

wrap(常见):换行,第一行在上边。

wrap-reverse:换行,第一行在正下方。


3.3. flex-flow特性

flex-flow特性是flex-direction特性和flex-wrap特性的缩写方式,默认设置数值row nowrap。


3.4. justify-content特性

justify-content特性界定了新项目在主轴上的两端对齐方法。

它可用五个值,实际两端对齐方法与轴的方位相关。下边假定主轴为从左往右。

flex-start(默认设置值):左两端对齐

flex-end:右两端对齐

center: 垂直居中

space-between(最经常用):两边两端对齐,新项目中间的间距都相同。

space-around:每一个新项目两边的间距相同。因此,新项目中间的间距比新项目与外框的间距大一倍

3.5. align-items特性
align-items特性界定新项目在交叉式轴上怎样两端对齐。

它可用五个值。实际的两端对齐方法与交叉式轴的方位相关,下边假定交叉式轴从上到下。

flex-start:交叉式轴的起始点两端对齐。

flex-end:交叉式轴的终点站两端对齐。

center:交叉式轴的中点两端对齐。

baseline: 新项目的第一写作字的基准线两端对齐。

stretch(默认设置值):假如新项目未设定高宽比或设成auto,将占满全部器皿的高宽比。

先看来看沒有给新项目设定高宽比的情况下,而且align-items为flex-start的情况下的实际效果

align-items:stretch时

3.6. align-content特性

align-content特性界定了多根轴线的两端对齐方法。假如新项目仅有一根轴线,该特性不了功效。

该特性可用6个值。

flex-start:与交叉式轴的起始点两端对齐。

flex-end:与交叉式轴的终点站两端对齐。

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

space-between:与交叉式轴两边两端对齐,轴线中间的间距均值遍布。

space-around:每根轴线两边的间距都相同。因此,轴线中间的间距比轴线与外框的间距大一倍。

stretch(默认设置值):轴线占满全部交叉式轴,前提条件是新项目沒有设定高宽比,不然实际效果跟align-content:flex-start实际效果一样