css3关于flex弹性盒子最新语法及案例

来源：互联网发布：2016最新网络歌曲试听编辑：程序博客网时间：2024/06/07 05:24

1.前言

CSS3中引入的布局模式Flexbox布局，主要是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（适配所有类型的现实设备和屏幕大小）。
Flexbox布局功能主要有以下几点：

屏幕和浏览器窗口大小改变时可以灵活调整布局
指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），来调整项目大小。（注意，额外空间的概念要理清楚！）
指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间
指定如何将垂直于元素布局周的额外空间分布到该元素的周围
控制元素在页面上的布局方向
可以在浏览器渲染周不按照文档流先后顺序重排伸缩项目顺序

2.Flexbox模型中术语：

1.主轴和侧轴

主轴和侧轴

2.Flexbox模型语法变更：

参考：http://www.runoob.com/css3/css3-flexbox.html
包含每个参数的案例

3.新版本Flexbox模型

1.伸缩容器display(用于伸缩容器)

display:flex | inline-flex;
兼容写法

    display: -webkit-flex;/*Safari,Opera,Chrome*/    display: -moz-flex; /*Firefox*/    display: -ms-flexbox;  /*IE*/    display: flex;

flex：块伸缩容器
inline-flex：内联伸缩容器
注意：CSS的columns在伸缩容器上没有效果；float、clear和vertical-align在伸缩项目上没有效果。

2.伸缩流方向flex-direction(用于伸缩容器)

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

row：在ltr排版方式下从左向右排列，在rtl排版方式下从右向左排列
column:类似于row，不过是从上到下排列
row-reverse和column-reverse是与对应的row和column排列方向相反
主要用来创建主轴，从而定义了伸缩项目放置在伸缩容器的方向

3.伸缩换行flex-wrap(用于伸缩容器)

flex-wrap：nowrap | wrap | wrap-reverse

nowrap：伸缩容器单行显示，在ltr和rtl排版方式下按对应方向排列；
wrap：伸缩容器多行显示，在ltr和rtl排版方式下按对应方向排列；
wrap-reverse：伸缩容器多行显示，但在ltr排版下，伸缩项目从右向左排列；rtl排版下，伸缩项目从左向右排列（和wrap相反）
主要用来定义伸缩容器里是单行显示还是多行显示，侧轴的方向决定了新行堆放的方向

4.伸缩流方向和换行flex-flow(用于伸缩容器)

flex-flow：<’flex-direction’> || <’flex-wrap’>

是伸缩流方向flex-direction和伸缩行换行flex-wrap的缩写版本
同时定义了伸缩容器的主轴和侧轴。

5.主轴对齐justify-content(用于伸缩容器)

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

flex-start：伸缩项目向一行的起始位置靠齐
flex-end：伸缩项目向一行的结束为止靠齐
center：伸缩项目向一行的中间位置靠齐
space-between：伸缩项目会平均分布在行里，第一个和最后一个伸缩项目靠着开始和结束位置
space-around：伸缩项目会平均分布在行里，两端保留一半的空间
主要用来定义伸缩项目沿着主轴线的对齐方式。
主轴对齐

6.侧轴对齐align-items(用于伸缩容器)和align-self(用于伸缩项目)

设置伸缩项目在侧轴的对齐方式有两种。一种是伸缩项目行在侧轴的对齐方式，由属性align-items控制；另一种是伸缩项目自身在侧轴的对齐方式，主要由属性align-self控制

align-items：flex-start | flex-end | center | baseline | strecth align-self：flex-start | flex-end | center | baseline | strecth

兼容写法：

    -webkit-align-items: center;/*Safari,Opera,Chrome*/    -moz-align-items: center;/*Firefox*/    -ms-flex-align: center;/*IE*/    align-items: center;

flex-start：伸缩项目在侧轴起点边的外边距紧靠在该行在侧轴起始边
flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点边
center：伸缩项目的外边距盒在该行的侧轴上居中放置
baseline：伸缩项目根据伸缩项目的基线对齐
strech：默认值，伸缩项目拉伸填充整个伸缩容器

7.堆栈伸缩行align-content

align-content会改变flex-wrap的行为。与align-items相似，但不是对齐伸缩项目，对齐的是伸缩行。

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

flex-start：各行向伸缩容器的起点位置堆叠
flex-end：各行向伸缩容器的终点位置堆叠
center：伸各行向伸缩容器的中间位置堆叠
space-between：各行在伸缩容器中平均分布
space-around：各行在伸缩容器中平均分布，在两边各有一半空间
strech：默认值，各行将会伸展以占用额外的空间
这个属性只有伸缩项目有多行时才生效，在flex-wrap为wrap时，并且没有足够的空间把伸缩项目行放在同一行中。该属性对每一行起作用而不是每个伸缩项目。

8.伸缩性flex

设置属性flex的伸缩容器会等比地按照各伸缩项目的扩展比率分配额外的空间，也会按照收缩比率缩小各伸缩项目以避免伸缩项目溢出伸缩容器

flex：none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]

兼容写法：

    -webkit-flex: 1;/*Safari,Opera,Chrome*/    -moz-flex: 1;/*Firefox*/    -ms-flex: 1;/*IE*/    flex: 1;

flex-grow：扩展比率
flex-shrink：收缩比率
flex-basis：伸缩基准值
flex属性可以用来指定可伸缩长度的部件：扩展比率、收缩比率和伸缩基准值

9.显示顺序order

order : number

通过order属性来改变伸缩项目出现在源文档的次序，从序号最小的组开始布局

应用：圣杯布局！顺序重组，还实现了中间列的等高效果以及页脚的黏附效果

总结：主要整理了Flexbox模型布局功能、属性术语、语法规范、各版本语法变更和新版本Flexbox模型！除此之外，还有更头疼的是浏览器兼容性，需要多次练习整理才能好好使用伸缩布局模型来解决布局问题。

案例：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        body{            padding: 50px;            /*direction: rtl;/!**文本方向*!/*/        }        .flex{            float: left;            display: flex;            /*display: inline-flex;*/            /*flex-direction: column-reverse; /!***子元素文本对齐方式*!/*/            /*justify-content: space-around; /!**主轴方向的对齐方式*!/*/            /*align-items: flex-end; /!**侧轴方向的对齐方式**!/*/            /*flex-flow: wrap; /!**子元素是否可以换行**!/*/            /*align-content: space-around;/!**align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。*!/*/            width: 1000px;            height: 500px;            background-color: grey;        }        .item1{            /*flex: 1;*/            text-align: center;            width: 200px;            height: 30%;            background-color: #6ec8ff;            /*align-self: auto;*/        }        .item2{            flex: 1;            /*order: -1; /!**排列顺序*!/*/            /*margin-right: auto;  /!**右侧间距自动*!/*/            /*margin:0 auto; /!**左右侧间距自动*!/!*/            /*align-self: center; /!**相对于父容器的侧轴方向的对齐方式*!/*/            width: 300px;            height: 30%;            text-align: center;            background-color: #e86126;        }        .item3{            flex: 1;            width: 200px;            height: 30%;            text-align: center;            background-color: #e271b4;            /*align-self: flex-end;*/        }        .out{            /*float: left;*/            display: inline-block;            width: 200px;            height: 500px;            text-align: center;            background-color: #73c78f;        }    </style></head><body><div class="flex">    <div class="item1">item1</div>    <div class="item2">item2</div>    <div class="item3">item3</div>    <!--<div class="item1">item4</div>-->    <!--<div class="item2">item5</div>-->    <!--<div class="item3">item6</div>--></div><div class="out">out</div></body></html>

0 0