更方便、简洁的布局方法,Flex布局
开发工具和关键技术:Adobe Dreamweaver CC 2017,Flex布局
作者:金建勇
撰写时间:2019年1月19日
首先我们了解下Flex布局的定义:Flex即Flexible Box的缩写,意为 “弹性布局”,为盒模型提供了更大的灵活性,flex布局已经适应所有浏览器,任何容器都能指定为Flex布局。让我们来看以下例子:
先简单布置好页面,代码结构:最外层一个大盒子包裹三个小盒子,下面用flex布局实现一些页面布局。
网页效果:
1、 给大盒子指定flex布局。让三个小盒子两端对齐,间隔距离相,代码见下图
display: flex;指定大盒子为弹性布局(行内元素也能设置为弹性布局:display: inline-flex;)
**flex-direction**: row;设置主轴为水平方向,起点为左端(默认值)
其他属性值:column 垂直方向,起点为上端;
row-reverse 水平方向,起点为右端;
column-reverse 垂直方向,起点为下端;
**justify-content**: space-between;设置小盒子两边对齐
其他属性值:center 居中;
flex-start 从主轴开始方向对齐;
flex-end从主轴结束方向对齐;
space-around 每个元素两侧间隔相等
网页效果:
2、 让三个小盒子垂直居中,代码见下图
**flex-direction**:column; 设置主轴为垂直方向
**align-items**: center; 交叉轴中点对齐
其他属性值:flex-start 交叉轴起点对齐;
flex-end 交叉轴终点对;
baseline 基于盒子内第一行文字对齐;
stretch 若小盒子没有设置高度,则占满大盒子的高度
网页效果:
3、 在上面的基础上,再让三个小盒子对角排列,代码见下图
**align-self**: flex-start;
让单个盒子与其他盒子对齐方式不同,其他属性值与align-items属性值完全相同
网页效果:
利用Flex布局还能完成各种布局,例如以下一些布局:
网页效果:
———————————————————————————————————————
网页效果:
———————————————————————————————————————
网页效果:
———————————————————————————————————————
从以上例子能看出flex布局用更方便,简洁的代码完成了这些页面布局,到这里你可能会觉得也就这么简单,但其实还有很多布局方式也都可以通过 flex布局 实现,而要达到你想要的一些布局也就没那么简单。所以我们需要了解透彻 flex布局 的全部属性和属性值,熟悉这些之后再去应用也就会简单很多了。
下面我们就看看除上述属性外 flex布局 的一些其他属性:
**flex-grow** 定义元素的放大比例,默认值为0 。
**flex-shrink** 定义元素的缩小比例,默认值为1
**flex-basis** 定义元素在分配多余空间之前,项目占据的主轴空间,默认值为auto。
以上三个属性可以统一简写成 **flex** 默认值就为 0 1 auto(建议用简写)
**order** 定义元素的排列顺序,数值越小,排序越靠前,默认值为0。
**flex-wrap** 定义元素如何换行。
属性值:nowrap(默认值);wrap ;wrap-reverse
**align-content**定义元素关于多跟轴线的对齐方式,若只有一根轴线,该属性无用。
属性值有:
center 居中;
flex-start 从主轴开始方向对齐;
flex-end从主轴结束方向对齐;
space-between 设置小盒子两边对齐;
space-around 每个元素两侧间隔相等;
stretch 若小盒子没有设置高度,则占满大盒子的高度。
总结上面:如果你不使用flex布局,可能就需要通过设置浮动、调整盒子内外边距等等更多属性才能达到一些你想要的页面布局。而 flex 布局恰好就是一个很好的工具,熟悉使用flex布局就可以更方便、简洁的完成各种页面布局,所以赶紧用起来吧。
下期作品再见!!!