flex

2019独角兽企业重金招聘Python工程师标准>>>

弹性容器属性

flex:值会引起一个元素生成一个盒级的弹性盒子。

“inline-flex”会生成一个行内弹性盒子

flex-direction 弹性盒子方向

值：row | row-reverse | column | column-reverse

flex-wrap 弹性盒子换行

“flex-wrap”属性控制了容器为单行还是多行。并且定义了侧轴的方向，新行将沿侧轴方向堆砌。 值：nowrap | wrap | wrap-reverse

默认：nowrap

flex-flow:弹性盒子流

“flex-flow”属性是设置“flex-direction”和“flex-wrap”的简写，可以同时定义主轴和侧轴。

order:弹性盒子顺序

“order”属性通过将这些元素分配到序数分组来控制它们出现的顺序

默认值：0

flex-grow:弹性盒子增长

“flex-grow”属性设置增长因数，不接受负值。

默认值：0

flex-shrik:弹性盒子收缩

“flex-shrink”属性设置了收缩因数，不接受负值。

默认值：1

flex-basis:弹性盒子伸缩

“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。

值：类似“width”，默认值：auto

flex:弹性盒子“Flex”属性（简写）

“flex”属性设置了弹性盒子长度的组成，包括增长因数、收缩因数和伸缩基准值。对于一个弹性元素，“flex”属性会被用来设置元素的尺寸，对于一个非弹性元素，该属性无效。

值：none | ||

justify-content:弹性元素沿容器主轴方向对齐.

提示：以前版本的语法不支持“space-*”值。

值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start

align-items:弹性元素在容器侧轴上的对齐方式,与“justify-content”功能相似但是方向垂直.

“align-items”设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，“align-self'”属性总是与“align-items”相同。）

align-self:设置弹性元素在侧轴的对齐方式

用来单独设置弹性元素在侧轴的对齐方式，功能与“align-items”相同。可以覆盖“align-items”属性。 单独设置子容器如何沿交叉轴排列.

align-content:弹性元素内容对齐

“align-content”属性设置了容器内每行沿侧轴的对齐方式。与“justify-content”属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效。

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 属性值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch 常用属性：flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

网址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content

注意问题

1 由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：

多栏布局模块的 column-* 属性对弹性项目无效。 float 与 clear 对弹性项目无效。使用 float 将使元素的 display 属性计为block。 vertical-align 对弹性项目的对齐无效。

2 align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。 align-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。 align-content重点就是多行.

align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居 中而不是让整个容器居中。

每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器 align-items 属性完全一致， 如果两者同时设置则以子容器的 align-self 属性为准。

space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。 space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。 stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

============================= 第一部分： 网址：http://blog.youkuaiyun.com/magneto7/article/details/70854472 http://blog.youkuaiyun.com/magneto7/article/details/70854472 flex 布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。 不过常用的属性只有 4 个，父容器、子容器各 2 个，我们就先从常用的说起吧。 src="https://dn-mhke0kuv.qbox.me/f443b657dbc39d361f68.png"

1.1 父容器 设置子容器沿主轴排列：justify-content justify-content 属性用于定义如何沿着主轴方向排列子容器。

。。。。。

第二部分：案例 案例1：淘宝H5布局分析 父容器设置 改变轻松筹首页导航

转载于:https://my.oschina.net/wsh2016/blog/1551388