IDEA激活码 (2020-12-03)

flex布局——只看这一篇就够了

资源 

为啥要用flex布局模型

任何GUI平台下的程序开发都需要对其layout模型做到熟练应用。android/ios/html/winform/java swing/flash等都是一样,他们都提供了各自平台下的布局模型。本文介绍html下的layout模型。

html的layout方案有两种,一种是以display/position/float为基础的传统模型。一种是flex(flexable box 弹性布局)模型。两种模型的相比:

或者完全可以越过这两种方案到底选择哪种的讨论,直接选择使用flex即可。

基本概念

容器:包含其他元素的元素(有下级元素的元素);

项目:被其他元素包含的元素为项目(有上级元素的元素);

主轴:项目排列的方向;

交叉轴:主轴垂直的方向;

 通过给html元素的display属性指定值为flex,来将其作为一个flex容器。比如下面实现了一个class为box的flex容器:

.box{  display: flex;} 

容器下项目的floatclearvertical-align等属性将自动无效。因为这是两种不兼容的布局模型,这些属性不同共用。

然后按照下表进行布局即可。

容器属性

flex-direction

row  横向 起点在左(默认)

row-reverse横向 起点在右

column纵向 起点在上

column-reverse;纵向 起点在下

指定元素排列的主轴方向

 

flex-wrap

nowrap 不换行(默认)

wrap 换行,第一行在上方

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

指定元素换行行为

 

flex-flow

 

flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

justify-content

flex-start  (默认)起点对齐

flex-end  终点对齐

center  居中对齐

space-between  两边对齐

space-around  分散对齐

主轴的对齐方式

align-items

flex-start 起点对齐

flex-end 终点对齐

center  居中对齐

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

stretch (默认 ) 如果项目未设置高度或设为auto,将占满整个交叉轴的高度或者宽度。

交叉轴的对齐方式

align-content

flex-start:起点对齐

flex-end:终点对齐

center:居中对齐

space-between:两端对齐

space-around:分散对齐

stretch(默认值):占满整个交叉轴的高度或者宽度

项目有多个主轴(多行或者多列)时的交叉轴对齐方式

项目属性

order

数值越小,排列越靠前,默认为0

项目的排列顺序

flex-grow

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

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。

如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

项目的放大比例

flex-shrink

默认为1,即如果空间不足,该项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。

如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

项目的缩小比例

flex-basis

浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

定义了在分配多余空间之前,项目占据的主轴空间(main size)。

flex

默认值为0 1 auto。后两个属性可选。

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

align-self

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

允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

 

 

获取IDEA激活码