css3弹性盒子 display:flex的属性一览
begin enjoy👇

弹性盒子

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。使用弹性盒子可以更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

设置元素为弹性盒子使用属性 display:flex或者 display:inline-flex

弹性盒子分为 容器子元素, 当标签设置属性display:flex后那么该元素就是弹性盒子容器。元素内部直接子级标签就是子元素,通过情况下需要分别为容器与子元素设置属性。

一、 弹性盒子容器常用属性

  • flex-direction 指定弹性容器中子元素排列方式
  • flex-wrap 设置弹性盒子的子元素超出父容器时是否换行
  • flex-flow 复合属性。设置或检索伸缩盒对象的子元素排列方式。
  • align-items 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式
  • align-content 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
  • justify-content 设置弹性盒子元素在主轴(横轴)方向上的对齐方式

flex-direction 决定子元素的排列方向。

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }
子元素排列方向

  • row 默认值。元素将水平显示,正如一个行一样。
  • row-reverse 与 row 相同,但是以相反的顺序。
  • column 元素将垂直显示,正如一个列一样。
  • column-reverse 与 column 相同,但是以相反的顺序。

flex-wrap 规定flex容器是子元素宽度超过容器时是否换行。

.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }

  • nowrap 默认值。规定元素不拆行或不拆列。
  • wrap 规定元素在必要的时候拆行或拆列。
  • wrap-reverse 规定元素在必要的时候拆行或拆列,但是以相反的顺序。

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

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

align-items 定义flex子元素在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

  • stretch 默认值。项目被拉伸以适应容器。
  • center 项目位于容器的中心。
  • flex-start 项目位于容器的开头。
  • flex-end 项目位于容器的结尾。
  • baseline 项目位于容器的基线上。

justify-content 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式

  • flex-start 默认值。项目位于容器的开头。
  • flex-end 项目位于容器的结尾。
  • center 项目位于容器的中心。
  • space-between 项目位于各行之间留有空白的容器内。
  • space-around 项目位于各行之前、之间、之后都留有空白的容器内。

二、 弹性盒子子元素属性

  • order 设置弹性盒子的子元素排列顺序。
  • flex-grow 设置或检索弹性盒子元素的扩展比率。
  • flex-shrink 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
  • flex-basis 用于设置或检索弹性盒伸缩基准值。
  • flex 设置弹性盒子的子元素如何分配空间。
  • align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。

order 设置子元素排列顺序

.flex-container .flex-item { order: <integer>; }

flex-grow 设置或检索弹性盒子元素的扩展比率

.flex-container .flex-item { flex-grow: <integer>; }

flex-shrink 子元素的收缩比率

.flex-container .flex-item { flex-shrink: <integer>; }

flex-basis 设置或检索弹性盒伸缩基准值

.flex-container .flex-item { flex-basis: <integer> | auto; }

flex flex-grow、flex-shrink 和 flex-basis 属性的简写属

align-self 子元素上使用。覆盖容器的 align-items 属性

.flex-container .flex-item { align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit; }

  • auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
  • stretch 元素被拉伸以适应容器。
  • center 元素位于容器的中心。
  • flex-start 元素位于容器的开头。
  • flex-end 元素位于容器的结尾。
  • baseline 元素位于容器的基线上。
  • initial 设置该属性为它的默认值。
  • inherit 从父元素继承该属性。

posted @ Zycin (非转载 来自个人学习资料整理)