flex布局入门

标签：

基本概念

flex 是 flexible box 的简称, 也就是弹性盒模型， 所以它并不是一个单独的属性，而是一套完整的模型，包含了一整套的属性，其中一些属性是设置在容器（父元素，称之为flex container）上的，其余的属性设置在子元素（flex items）上。

弹性盒模型基于 flex-flow directions 布局，搞一张图便于理解

flex items 沿着主轴（从main-start到main-end）或者交叉轴（从cross-start到cross-end）排列。

上图所示的 flex-container 中有两根轴，主轴（main axis）和交叉轴（cross axis），主轴从 main start 开始，到 mian end 结束，交叉轴从cross start 开始，到cross end 结束。

• 主轴（main axis）------- flex-items沿着flex容器的主轴排列，注意，主轴并不一定是横向的，这取决于 flex-direction 属性的值
• 交叉轴（cross axis）------- 垂直于主轴，方向也取决于 flex-direction 属性的值

flex-container 的属性

display

/* css */

.container {
    display: flex;   /* or inline-flex */
    display: -webkit-flex; 
}

flex-direction

.container{
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

默认情况下，flex-items 会在一行排列，超出父级宽度不会换行

如果设置为wrap，flex-items宽度总和超过父级宽度时会按照下图所示排列

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

• nowrap （default）： 单行从左到右排列
• wrap ： 多行从左到右排列
• wrap-reverse：多行从右到左排列

下图分别为wrap和wrap-reverse的情形

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写形式，默认值是 row nowrap。

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

justify-content

该属性定义了  flex-items 在主轴与上的对齐方式。

.container{
    justify-content: flex-start | flex-end | center | space-between | sapce-around;
}

该属性具体的对齐方式与 flex-direction 的值有关，下面假设 flex-direction 的值为 row，即主轴方向为从左到右

• flex-start （默认值）： 左对齐
• flex-end ： 右对齐
• center ： 居中对齐
• space-between： 两端对齐，items之间的间隔都相等
• space-around ： 每个items两侧的间隔相等

align-items

该属性定义 flex-items 在交叉轴上的对齐方式

flex布局入门

标签：

原文地址：http://www.cnblogs.com/walle2/p/4821505.html