flex弹性盒子的使用

Posted sspeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex弹性盒子的使用相关的知识,希望对你有一定的参考价值。

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

  CSS3引入了一种新的布局模型—— flex 布局。flex是 flexible box 的缩写,一般称之为弹性盒模型。flex布局提供一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示设备和各种尺寸的屏幕。

 

基本概念

  要让一个元素变成伸缩容器,需要使用 display 属性。采用 flex 布局的元素,称为伸缩容器 (flex container) ,容器内的子元素称为伸缩项目 (flex item)。

  使用 flex 布局以后,需要注意 float、clear 和 vertical-align 属性在伸缩项目上没有效果

  弹性盒模型的两种容器块级伸缩容器和内联伸缩容器(display: flex | inline-flex;)的区别类似于 block 和 inline-block 的区别,一个独占一行,另一个非独占一行。

 

伸缩容器

  有以下6个属性作用在伸缩容器上:

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 伸缩项目在侧轴上的对齐方式 

  • stretch(默认值)伸缩项目将拉伸充满整个容器高度
  • flex-start 顶部对齐
  • flex-end 底部对齐
  • center 垂直居中对齐
  • baseline 伸缩项目与第一行文字的基线对齐

align-content 堆栈伸缩行 

 

伸缩项目

  有以下6个属性设置在伸缩项目上

order

  属性定义伸缩项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow

  属性定义伸缩项目的放大比例,默认为 0,即如果存在剩余空间,也不放大。

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

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

flex-shrink

  属性定义了伸缩项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小。

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

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

flex-basis

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

flex

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

  该属性有两个快捷值: auto (1 1 auto) 和 none (0 0 auto) 。

align-self

  属性允许单个项目有与其他项目不一样的对齐方式,可覆盖容器的 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch (充满整个容器)。

以上是关于flex弹性盒子的使用的主要内容,如果未能解决你的问题,请参考以下文章

css弹性布局是啥

CSS弹性盒子布局flex

CSS3--Flex弹性盒子布局: 声明弹性盒子 & 容器的属性

弹性盒子flex布局

CSS3--Flex弹性盒子布局: flex项目的属性

AngularJS 实现弹性盒子布局