CSS---flex布局

一、CSS 盒子模型(Box Model)

盒子模型  ---  display: content-box

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

• width和height：内容的宽度、高度（不是盒子的宽度、高度）。
• padding：内边距。
• border：边框。
• margin：外边距。

    

 

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

CSS盒模型和IE盒模型的区别：

• 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

• IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度 

CSS3 box-sizing 属性 

box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

用法：box-sizing: content-box|border-box|inherit;

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 默认值，平时普通盒子模型，向外扩展，添加border，padding，盒子会变大
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 向内扩展，添加border，padding，盒子模型不会变大
inherit	规定应从父元素继承 box-sizing 属性的值。

 

calc() = calc(四则运算)

用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；

 

---

二、前端布局神器display:flex

2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。它即可以应用于容器中，也可以应用于行内元素。如果父级设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 

.box{
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; //将对象作为弹性伸缩盒显示
}

行内元素也可以使用Flex布局。

.box {
    display: inline-flex; //将对象作为内联块级弹性伸缩盒显示
}

//兼容性写法
.box {
    display: flex || inline-flex;
}

基本概念

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

结构示意图
容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

• main start/main end：主轴开始位置/结束位置；
• cross start/cross end：交叉轴开始位置/结束位置；
• main size/cross size：单个项目占据主轴/交叉轴的空间；

容器属性（父级属性）

设置在容器上的属性有6种。

• flex-direction       决定主轴方向：flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap            是否换行，如何换行：`flex-wrap: nowrap | wrap | wrap-reverse`;
• flex-flow              `flex-direction`属性和`flex-wrap`属性的简写形式：flex-flow: row nowrap;
• justify-content     项目在主轴上的对齐方式：justify-content: flex-start | flex-end | center | space-between | space-around;
• align-items          项目在交叉轴上如何对齐：align-items: flex-start | flex-end | center | baseline | stretch;
• align-content      多根轴线的对齐方式：align-content: flex-start | flex-end | center | space-between | space-around | stretch;

1、flex-direction属性：决定主轴的方向（即项目的排列方向）

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

 

• row（默认）：主轴水平方向，起点在左端；
• row-reverse：主轴水平方向，起点在右端；
• column：主轴垂直方向，起点在上边沿；
• column-reserve：主轴垂直方向，起点在下边沿。

flex-wrap属性：定义换行情况

默认情况下，项目都排列在一条轴线上，但有可能一条轴线排不下。

 

一条轴线排不下

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

• nowrap（默认）：不换行；

• wrap：换行，第一行在上方；

• wrap-reverse：换行，第一行在下方。 

3、*flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap（较少使用）

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

 

4、justify-content：项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了)。子元素水平排列方式

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


.box{
    justify-content:center;            //居中
    justify-content:flex-start;        //居左
    justify-content:flex-end;          //居右
    justify-content:space-between;     //两端对齐
    justify-content:space-around;      //拉手排列（广播体操伸开双臂）
}

flex-start：在主轴上由左或者上开始排列

flex-end：在主轴上由右或者下开始排列

center：在主轴上居中排列

space-between：在主轴上左右两端或者上下两端开始排列

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

5、align-items：定义在交叉轴上的对齐方式，若主轴为横向，则交叉轴为纵向

.box {
    align-items: flex-start | flex-end | center | baseline | stretch; 
}

flex-start：在交叉轴上由左或者上开始排列

flex-end：在交叉轴上由右或者下开始排列

center：在交叉轴上居中排列

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

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

6、*align-content属性：定义多根轴线的对齐方式

如果项目只有一根轴线，该属性不起作用。
所以，容器必须设置flex-wrap：···；

.box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

项目的属性（子级属性）

设置在项目上的属性也有6个。

• order                  定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow           定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink         定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis          定义了在分配多余空间之前，项目占据的主轴空间（main size）。
• flex                   是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
• align-self          允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

1、order属性：定义项目的排列顺序。

数值越小，排列越靠前，默认为0，可以是负值。

.item {
    order: <整数>;
}

<div class="wrap">
    <div class="div" style="order:4"><h2>item 1</h2></div>
    <div class="div" style="order:2"><h2>item 2</h2></div>
    <div class="div" style="order:3"><h2>item 3</h2></div>
    <div class="div" style="order:1"><h2>item 4</h2></div>
</div>

2、flex-grow属性：定义项目的放大比例

默认值为0，即如果空间有剩余，也不放大。
可以是小数，按比例占据剩余空间。

默认情况

.item{
    flex-grow: <数字>;
}

若所有项目的flex-grow的数值都相同，则等分剩余空间

如果有一个项目flex-grow为2，其余都为1，则该项目占据剩余空间是其余的2倍

3、flex-shrink属性：定义项目的缩小比例

默认值都为1，即如果空间不足将等比例缩小。
如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。
负值对该属性无效，容器不应该设置flex-wrap。

.item{
    flex-shrink: <非负整数>;
}

如果一个项目设置flex-shrink为0；而其他项目都为1，则空间不足时，该项目不缩小。

如果所有项目都为0，则当空间不足时，项目撑破容器而溢出。

如果设置项目的flex-shrink不为0的非负数效果同设置为1。

4、flex-basis属性：定义在分配多余空间之前，项目占据的主轴空间。

默认值为auto，浏览器根据此属性检查主轴是否有多余空间。

.item{
    flex-basis:  <auto或者px>;
}

注意设置的flex-basis是分配多余空间之前项目占据的主轴空间，如果空间不足则默认情况下该项目也会缩小。

空间不足，项目缩小，小于设定值

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

默认值为0 1 auto，第一个属性必须，后两个属性可选。

.item{
    flex: none | [<flex-grow><flex-shrink><flex-basis>];
}

• 可以用 flex:auto; 代替 flex: 1 1 auto;；
• 可以用 flex: none;代替 flex: 0 0 auto；

6、align-self属性允许item有自己独特的在交叉轴上的对齐方式，它有六个可能的值。默认值为auto 

.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

• auto：和父元素align-self的值一致
• flex-start：顶端对齐
• flex-end：底部对齐
• center：竖直方向上居中对齐
• baseline：item第一行文字的底部对齐
• stretch：当item未设置高度时，item将和容器等高对齐