美文网首页
FlexBox的使用

FlexBox的使用

作者: 曼珠沙华_521b | 来源:发表于2017-08-24 11:01 被阅读0次

FlexBox的使用:

1.什么FlexBox布局?

弹性盒子模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒装模型提供最大的灵活性。

FlexBox布局更多的用到移动端,PC端除了盒子模型布局,也支持FlexBox布局 , FlexBox布局将会是成为未来开发的主流技术,将在移动端体现的最明显。

2.FlexBox应用场景:

1.FlexBox布局能够解决的问题

浮动布局

各种机型屏幕的适配

水平和垂直居中

自动分配宽度

......

2.Flex布局的思想

在pc段与移动端的Flex布局的主侧轴是相反的,这点需要注意

主轴

**侧轴(交叉轴)**

容器默认存在两根轴:水平的主轴(main axis)垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

eg:

flexbox布局初体验

3.父容器排列方式的不同,主轴和侧轴方向也有所变化

4.PC指定盒子为FlexBox布局结论:主轴的方向  与  父容器中的排列方向  一致



小案例


5.FlexBox的常用属性

1.容器属性

1.flexDirection

row | row-reverse | column | column-reverse

该属性:规定了主轴的方向(父容器中的排列方向)

row:主轴为水平方向,起点在左端。

row-reverse:主轴为水平方向,起点在右端。

column(默认值):主轴为垂直方向,起点在上沿。

column-reverse:主轴为垂直方向,起点在下沿。

column-reverse:主轴为垂直方向,起点在下沿。

案例:

将上面的flexDirection的属性修改成:column后,效果为:

![](2.png)

将上面的flexDirection的属性修改成:row后,效果为:

2.justifyContent

flex-start | flex-end | center | space-between | space-around

规定:子item在主轴方向的对齐方式

flex-start(默认值):伸缩项目向一行的起始位置靠齐。

flex-end:伸缩项目向一行的结束位置靠齐。

center:伸缩项目向一行的中间位置靠齐。

space-between:两端对齐,项目之间的间隔都相等。

space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。

下图灰色为背景,主轴方向为水平,侧轴方向为垂直

案例:

将上面的justifyContent的属性修改成:flex-end后,效果为:

将上面的justifyContent的属性修改成:space-between后,效果为:

3.alignItems

flex-start | flex-end | center | baseline | stretch

规定:子item在侧轴方向的对齐方式

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

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

center:交叉轴的中点对齐。

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

stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

下图灰色为背景,主轴方向是水平,侧轴方向是垂直



将上面的alignItems的属性修改成:center后,效果为:

将上面的alignItems的属性修改成:flex-end后,效果为:

4.flexWrap

nowrap | wrap | wrap-reverse

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

nowrap(默认值):不换行。


wrap:换行,第一行在上方。

wrap-reverse:换行,第一行在下方。(和wrap相反)


没设计换行

换行

2.元素属性

1.flex

flex是 “flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写, 参数一:定义项目的放大比例;参数二:定义了项目的缩小比例;参数三:定义了在分配多余空间之前,项目占据的主轴空间。其中第二个和第三个参数(flex-shrink、flex-basis)是可选参数。

flex默认值为“0  1  auto ”。

案例:

权重分别:1,1,1

权重分别:1,4,1

2.align-self

align-self属性允许单个item有与其他item不一样的对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;






相关文章

网友评论

      本文标题:FlexBox的使用

      本文链接:https://www.haomeiwen.com/subject/lkporxtx.html