flex 两端对齐_什么是flex弹性布局？为什么grid布局是二维布局且更强大？

是2009年W3C提出的一种布局方式，也叫做弹性布局，弹性布局的出现给盒模型提供了很大的便利性。不知不觉过去10年了。

一. 如何让容器变成flexbox布局

1. 父元素的设置

.parent{ display: -webkit-flex; /* Safari */ display: flex;}

或者成为行内flex布局

.parent{ display: inline-flex;}

注意：设为flexbox布局之后，子元素的float、clear、vertical-align属性都会失效。

2. 子元素的设置

.child{ flex:[number];}

给其中的每一个孩子设置 flex: [number] 来让他们按比例分配容器的宽度。

比如三个child分别设置了 flex: 1 flex: 2 flex: 1 则他们是按照 1-2-1 的比例来分配宽度的。

如果有child没有设置 flex 而是设置了固定的宽度，比如 width: 100px 那么它的宽度就不受flex容器的影响，但是其他的设置了 flex: [number] 的容器会按比例平分剩下的部分。

二. flex布局的属性

1 . 针对父元素的属性

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-conten

(1). flex-direction

决定项目的排列方向(主轴的方向)

flex-direction: row | row-reverse | column | column-reverse;

按照字面意思也挺好理解的。

(2). flex-wrap

决定项目的换行方向

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap:不换行

wrap:正常换行

wrap-reverse:换行，但是第一行在下方，反方向换行

(3). flex-flow

是 flex-direction 和 flex-wrap 组合形式

(4). justify-content

定义项目在主轴的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start(默认值)：在项目开始的地方对齐；

flex-end：在项目结束的地方对齐；

center： 居中；

space-between：两端对齐，项目之间的间隔都相等；

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

(5). align-items

定义项目在交叉轴的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度。

(6). align-content

同时定义项目在主轴和交叉轴(水平线上)的对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：主轴方向与起点对齐，交叉轴方向也与起点对齐。

flex-end：主轴方向与终点对齐，交叉轴方向也与终点对齐。

center：主轴和交叉轴方向均为居中。

space-between：主轴和交叉轴方向均两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值)：轴线占满整个交叉轴这个有待考证

2 . 针对子元素的属性

orderflex-growflex-shrinkflex-basisflexalign-self

(1). order

定义项目的排列顺序，数值越小，排列越靠前。

order:; /* default:0 */

(2). flex-grow

定义项目的放大比例。

flex-grow:; /* default:0 */

(3). flex-shrink

定义项目的缩小比例。

flex-shrink:; /* default:0 */

(4). flex-basis

定义项目占据主轴的空间。

flex-basis:; /* default:auto */

(5). flex

flex是flex-grow、flex-shrink、flex-basis的缩写形式

flex:flex-grow flex-shrink flex-basis; /* default: 0 0 auto */

(5). align-self

允许单个子元素与其他子元素在交叉轴上的对齐方式不一样

align-self:auto:保持元素本身的对齐方式

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度

未完待续。。。。

---

建议查阅阮一峰博客，图文并茂http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

欢迎关注。