详解CSS3实现弹性布局的方式

弹性盒子是CSS3的一种新布局模式。下面本篇文章给大家谈谈CSS3弹性布局方式。有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对大家有所帮忙。 Basic support (single-line flexbox)29.0 21.0 -webkit-11.022.0 18.0 -moz-6.1 -webkit-12.1 -webkit-Multi-line flexbox29.0 21.0 -webkit-11.028.06.1 -webkit-17.0 15.0 -webkit- 12.1

三、CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设定 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包括了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素怎样在弹性容器内布局。

弹性子元素平常在弹性盒子内一行显示。默许状况每个容器只要一行。

下列元素展现了弹性子元素在一行内显示，从左到右:

4. flex-basis属性

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

：一个长度单位或者一个百分比，规定元素的初始长度。

auto：默许值。长度等于元素的长度。要是该项目未指定长度，则长度将依据内容决议。

5. flex属性

flex 属性用于设定或检索弹性盒模型对象的子元素怎样分配空间。

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

.flex-container .flex-item {
flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;
}

值	描述
flex-grow	一个数字，规定项目将相关于其他元素进行扩展的量。
flex-shrink	一个数字，规定项目将相关于其他元素进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 雷同。
none	与 0 0 auto 雷同。
initial	设定该属性为它的默许值，即为 0 1 auto。
inherit	从父元素继承该属性。

6. align-self属性

.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	从父元素继承该属性。

取值同 align-items。

参照

• 阮一峰老师·Flex布局教程

• runoob·Flex布局

本文转载自：https://www.jianshu.com/p/5856c4ae91f2