小 忆 博 客
有梦想,有精彩

弹性盒子

目录

  1. Flex Container Attribute(容器属性)
  2. Flex Item Attribute(项目属性)

弹性布局是W3C在2009年提出的一种新的布局方式,W3C提出这种布局方式已经很长时间了,对于2017年来说,这种布局方案已经不算什么新鲜技术了。

用我自己的话来总结弹性布局呢,就是在页面上画一个数轴,通过改变元素在数轴上的位置,来达到我们想要的页面效果。那弹性布局怎么实现呢?

只要在任何一个元素上指定为Flex布局,那么元素本身就会被当成一个Flex容器(flex container),在这个容器里面有 main axixs (主轴)和 cross axixs (侧轴),它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。

image


例如:

1
2
3
4
5
6
7
<div class="box">
<div class="item"></div>
<div class="item"></div>
</div>
.box{
display:flex;
}

上面代码中的box被指定Flex容器,子元素item就会成为这个容器中的成员。

这里需要注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

Flex Container Attribute(容器属性)

flex-direction

决定主轴的方向

- row 方向从左向右 (默认值)
- row-reverse 方向从右向左
- column 方向从上向下
- column-reverse 方向从下向上

flex-wrap

当项目在当容器中放不下时,如何换行

- nowrap 不换行
- wrap 换行
- wrap-reverse 换行后,行序为倒序

flex-flow

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(默认值):轴线占满整个交叉轴。

Flex Item Attribute(项目属性)


order

项目的排列顺序。数值越小,排列越靠前,默认为0。


flex-grow

项目的放大比例,默认为0


flex-shrink

项目的缩小比例,默认为1。

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

负值对该属性无效。


flex-basis

在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。


flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。


align-self

设置项目自身在侧轴上的位置,可以覆盖align-items属性值。

- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。