html弹性盒子布局,css3弹性盒子布局简单用法

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

一、Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。采用Flex布局的元素，称为Flex容器(flex container)，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称”项目”。

二、Flex布局的属性与用法

二、1 子元素div的水平垂直居中 justify-content | align-items

.box{

height:300px;

border: 1px solid #ccc;

display:flex; /*将div设置成弹性盒子*/

flex-direction :row; /*子元素的排列方式 默认从左到右*/

justify-content :center; /* 主轴 居中*/

align-items：center； /* 侧轴 居中*/

}

.no {

width:150px;

height:150px;

background:red;

}

子元素水平垂直居中对齐

justify-content： 定义子元素在主轴的对齐方式

justify-content：flex-start | flex-end | center | space-around | space-evenly | space-between

分别对应了 从左到右对齐(flex-start)从右到左对齐(flex-end)

居中对齐(center) 空白环绕(space-around)

左右对齐 平分空白区域( space-between)

align-items:定义子元素在侧轴的对齐方式

二、2 子元素左右对齐 空白平分 space-between

.box{ height: 160px;

display:flex;

justify-content:space-between;

border:1px solid #ccc;}

.no{ background:red;

width: 80px;

height: 80px;}

项目1

项目2

项目3

子元素左右对齐 平分空白区域

justify-content 左右对齐后，将空白区域平分，与子元素无太多关系

二、2 子元素左右对齐 空白平分 space-between

.box{ height: 160px;

display:flex;

justify-content:space-around ;

border:1px solid #ccc;}

.no{ background:red;

width: 80px;

height: 80px;}

项目1

项目2

项目3

space-around 空白环绕

space-around与上述不同的是 space-between是左右对齐之后将空白平分而 space-around是空白环绕 每个子元素都有一定量的空白

二、3 Flex盒子的主轴与侧轴

flex-direction 指定伸缩容器(Flex盒子)主轴的伸缩流方向

flex-direction： 主轴的方向(即项目的排列方向)。 【box-lines】 flex-flow： flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap justify-content： 项目在主轴上的对齐方式。【box-pack】 align-items： 项目在交叉轴上如何对齐。【box-align】 align-content： 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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

row 从左到右排列 row-reverse从右到左排列

column 从上到下排列 column-reverse从下到上排列

二、4 flex-wrap：指定伸缩项目是否沿着侧轴排列

nowrap：不换行，而是通过收缩每一个孩子的宽度来挤在一行。

wrap： 换行

wrap-inverse: 换行，但是折行方向相反

沿侧轴排列

.box{ height: 400px;

display:flex;

justify-content:space-around ;

flex-wrap: wrap;

border:1px solid #ccc;}

.no{ background:red;

width: 100px;

height: 100px;}

项目1

项目2

项目3

项目4

flex-wrap:wrap

二、5 flex的使用

它是 flex-grow, flex-shrink, flex-basis三个属性的快捷方式。默认是 0, 1, auto。 flex 属性会自动计算 flex-basis 属性的值。

如果给每个子元素都加上flex-grow：1；那么子元素将平分覆盖空白区

.box{ height: 400px;

display:flex;

border:1px solid #ccc;}

.no{ background:red;

width: 100px;

height: 100px;

flex:1;

margin: 1px; /*为了看出效果 加上1px的margin*/}

项目1

项目2

项目3

项目4

项目5

flex-grow

这时候，如果我给第二个项目定义 flex-grow: 2，那么它的宽度是怎么计算的？

项目的比例会变成1：2：1

比例不同

flex-shrink

如果孩子的总宽度超过了容器宽度(主轴)，那么这个属性定义了如何把超过的那部分平分到每个孩子身上，然他们按比例来缩小一定的宽度从而可以在容器中装得下。假设我们现在有一个容器，宽度为 200px，有三个孩子宽度为 100px，并且每个孩子有 margin: 2px，那么三个孩子总宽度 (100+2*2)*3 = 312px ，超过了 112px。

所以我们从这三个孩子身上砍下 112px 宽度，以让他们能装进容器中。

flex-basis

在分配空白之前，孩子的宽度，默认是 auto，也就是孩子本身的宽度，如果你定义了 flex-basis: 200px; ，那么它就会覆盖掉孩子的宽度。