CSS3 Flex布局

最新推荐文章于 2022-04-21 11:17:36 发布

Suoz

最新推荐文章于 2022-04-21 11:17:36 发布

阅读量840

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/Suoz_wly0710/article/details/73611225

版权

本文介绍了CSS3的Flex布局，重点讲述了Flexbox的主要思想和应用场景，包括主轴、侧轴的概念，以及justify-content、align-items等属性的用法。通过实战案例展示了如何使用Flex布局实现‘三栏布局’，并解释了伸缩性如何控制子元素在容器中的扩展和收缩。

摘要由CSDN通过智能技术生成

CSS2.1布局：
1. 块布局：呈现文档的布局模式
2. 行内布局：呈现文本的布局模式
3. 表格布局：用格子呈现2D数据的布局模式
4. 定位布局：能够直接地定位元素的布局模式

Flex布局常用于设计比较复杂的页面，可以轻松的实现浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。比如传统的布局方式是基于盒模型，依赖于display、position属性或者是float属性，但是在传统的布局上面并不好布局; 比如我们想让某个元素垂直居中的话，我们常见的会让其元素表现为表格形式，比如display:table-cell属性什么的，而使用flex布局是非常方便的

CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小)。

flex

（1）主轴：通过这个伸缩盒子特性，可以很好的管理伸缩项目在伸缩盒子中的布局方向。这个（伸缩流）方向可以是从左到右，从上到下，从下到上，从右到左。这个主轴的方向可以通过flex-direction属性来定义值分别为row，row-reverse，column，column-reverse。
（2）主轴起点和终点：伸缩项目从主轴起点开始布局到终点结束。属性justify-content就是根据主轴的起点和终点赋予start，center，end等值来布局的。
（3）侧轴：与主轴垂直的轴是侧轴，所以说，侧轴的方向是由主轴决定的。
（4）侧轴的起点和终点：伸缩项目充满伸缩行，并且伸缩行从侧轴起点开始布局容器到侧轴终点结束。

flexbox规范版本众多，浏览器对此语法支持度也各有不同：
兼容性

在这里就不一一讲解属性，文档上都有各个属性的声明。
传送门 => 配图理解属性文章

定义flex布局：当一个元素变成了伸缩容器，其子元素会自动变成伸缩项目（注：定义之后，子元素的float、clear、vertical-align不再有效）
display

display: -moz-box;  /*旧版本：FF19-*/  
display: -webkit-box;  /*旧版本 ios6-，safari 3.1-6*/  
display: box;  

display: -ms-flexbox;  /*混合版本：IE10*/  

display: -webkit-flex;  /*新版本：chrome等*/  
display: flex;  /*w3c标准*/

指定主轴（伸缩流）方向：只要主轴方向确定下来，垂直于它的侧轴也会随着确定下来。

//主轴方向从左到右
.row{
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;

    -ms-flex-direction: row;

    -webkit-flex-direction: row;
    flex-direction: row;
}

row

//主轴方向从右到左
.row-reverse{
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;

    -ms-flex-direction: row-reverse;

    -webkit